1247177 - Set the text shadow in UA style sheet for selections to none

Status: ASSIGNED

(Core :: CSS Parsing and Computation, defect)

Description

[Sebastian Zartner [:sebo]]

https://webcompat.com/issues/2231 outlines an issue of text being illegible on selection due to a text shadow being applied to it.

fantasai mentioned three options to handle this case[1]:
> A. Add this UA style rule or its equivalent effect:
>   :root::selection { text-shadow: none; }
> B. Draw text-shadow underneath the selection background.
> C. Leave as-is, we like it.

Like her I believe option A is the sanest solution. So, this would mean to apply the following rule to the UA stylesheet:

:root::-moz-selection {
  text-shadow: none;
}

Sebastian

[1] https://lists.w3.org/Archives/Public/www-style/2014Nov/0188.html

Comment 1

[Sebastian Zartner [:sebo]]

This is still an issue in Nightly 86.0a1 (2021-01-19), though not as bad anymore as some years ago where the shadow was drawn without alpha channel information.

Here's a simple test case:

data:text/html,<p style="font-size: 1em; text-shadow: 0 0 0.3em white, 0 0 0.3em white;">Text with shadow</p>

I still believe any text shadows should be removed on selection. Cameron, could this be looked into?

Sebastian

Comment 2

[Cameron McCormack (:heycam)]

Yes, I think it would make sense to add such a UA style sheet rule. But ideally we'd get that added to https://drafts.csswg.org/css-pseudo-4/#highlight-ua-styles. needinfo -> Daniel to help prioritize.

Comment 3

[Sebastian Zartner [:sebo]]

I also just saw this text in the specification:

Any text-shadow applying to a highlight pseudo-element is drawn over its corresponding highlight overlay background. Such text shadows also stack over each other (and over any original text-shadow applied to the text and its decorations, which continues to apply).

Note: Since each highlight overlay background is drawn over any shadows belonging to the layer(s) below, a highlight overlay background can obscure lower-level shadows.

If I understand this correctly, it means that any text shadows set on the element itself should be obscured by the ::selection pseudo-element's background anyway.
Though none of the browsers I've tested (Firefox 85, Chrome 88, Edge 88, even old Internet Explorer 11) actually does that. So yes, Daniel can probably say more here. And I guess it's worth filing a spec. issue for this.

Sebastian

Comment 4

[Sebastian Zartner [:sebo]]

Attachment: Bug 1247177 - Override any text shadows set on the element by default when its content is selected. r=emilio

This ensures that text shadows don't accidentally result in bad UX.
See also https://drafts.csswg.org/css-pseudo-4/#highlight-shadows.

Comment 5

[Sebastian Zartner [:sebo]]

(In reply to Cameron McCormack (:heycam) from comment #2)

Yes, I think it would make sense to add such a UA style sheet rule. But ideally we'd get that added to https://drafts.csswg.org/css-pseudo-4/#highlight-ua-styles. needinfo -> Daniel to help prioritize.

I dug deeper through the spec. history now and there was a rule added for this before. Later on, a definition got added that backgrounds of highlight overlays are drawn over any text shadows of lower levels, including its originating element. So the UA rule was redundant and got removed again.
Furthermore, some description regarding the paired cascade got added.

So once bug 1850290 is implemented, the change made here can be reverted.

Sebastian