1343967 - Invalid ::selection declarations make background and color initial (which means selection isn't highlighted)

Status: NEW

(Core :: Layout, enhancement, P3)

Description

[Stanimir Stamenkov]

Attachment: Selection style test

On various web sites like:

http://www.theverge.com/2017/2/27/14752590/mozilla-acquires-pocket-read-it-later

I've experienced the text selection is invisible using Firefox.  I've noticed this is often caused by some author styles supplied like:

    ::-moz-selection {
      background: auto;
    }

Looks like any style declaration on ::-moz-selection causes the text selection to become invisible, and it could be rather annoying.  I haven't found easy workaround using user styles, for example.

This happens with current Firefox release, and latest developer edition.

Comment 1

[jscher2000]

I don't think the problem is with ANY value, but with a value that does not specify a particular color (i.e., initial and unset do not work).

New example from SuMo thread: https://support.mozilla.org/questions/1260111

Globo.com G1 uses these rules that contain an invalid value for background (probably intended to be rgba):

    .mc-body *::selection {
        background: [196, 23, 12, 0.2];
    }

    .mc-body *::-moz-selection {
        background: [196, 23, 12, 0.2];
    }

The console shows "Error in parsing value for ‘background’. Declaration dropped." but Firefox still doesn't apply default color or background color. The selection is undetectable while the document is focused. For comparison, Chrome ignores the invalid color and applies default selection coloring.

Example: https://g1.globo.com/sp/sao-paulo/noticia/2019/05/26/manifestantes-fazem-ato-pro-bolsonaro-na-avenida-paulista.ghtml

P.S. This bug isn't listed on the meta tracking bug, bug 176170

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Chrome behaves exactly the same as soon as the declaration block is not fully invalid:

::selection {
  background: auto;
  font-size: 10px;
}

Comment 3

[jake]

Summary: Any style on ::-moz-selection renders text selection invisible → Invalid ::selection declarations make background and color initial (which means selection isn't highlighted)

I think the original summary was more accurate.

The following valid style rule causes the same problem:

::selection {
  text-shadow: none;
}

This is a genuine and very common use case (wherever a contrasting text-shadow is used, and the text when selected would otherwise be rendered undreadable), for which there appears to be no workaround (to restore the colours Firefox would apply by default, both focused and unfocused - the only workaround is to apply specific colours, which may not be consistent with the user's theme/preferences, and can't reflect whether the window is focused). If anyone knows of a workaround to re-access the default colours, please tell.

An empty style rule also causes the problem:

::selection {
}

A fix or workaround sooner rather than later would be appreciated. Perhaps it would be better if you diverted more resources to fixing bugs instead of making Firefox look more like Chrome.

Comment 4

[jake]

If anyone knows of a workaround to re-access the default colours, please tell.

I have tried initial, unset and revert, not surprisingly to no avail, because this is a bug (or design flaw).

Comment 5

[Tom Adler]

I’ve found this bug today, a workaround is to set values like follows:

::selection {
  color: highlighttext;
  background-color: highlight;
}

All I wanted was to make the CSS variables available not only inside :root, but also in ::backdrop and ::selection. Alas, any mention of ::selection resets its values in Firefox.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

But variables are already available in ::selection, and ::backdrop actually (bug 1855668).

Comment 7

[Tom Adler]

I am impressed with the reaction speed! Kudos!

I also thoroughly enjoy the coincidence, it’s not often that I encounter bugs which were fixed just recently but not yet released.

I’m looking forward to the release of this fix, but in the meanwhile the variables are unavailable in either of them, and setting the variables triggers this Firefox-only bug. I hope that Blink catches up soon as well.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Blink fixed it recently as well: https://bugs.chromium.org/p/chromium/issues/detail?id=827397