Consider not inverting selection colors on dark backgrounds
Categories
(Core :: Layout: Text and Fonts, defect, P3)
Tracking
()
People
(Reporter: billdillensrevenge, Unassigned)
Details
Attachments
(5 files)
ffrthcr.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0
Steps to reproduce:
Go to https://www.reddit.com/r/firefox/ (you must be signed-in to repro) , make sure reddits "Night Mode" is turned on, highlight some of the text on the r/Firefox sidebar "The latest news and developments on Firefox and Mozilla, a global non-profit that strives to promote openness, innovation and opportunity on the web." and observe the text contrast ratio of the highlighted text is way too low, it's almost impossible to read the text, screenshot attached.
Expected results:
Chrome doesn't have this problem
|
||
Updated•6 years ago
|
|
||
Comment 1•6 years ago
|
||
Seems like a UA stylesheet issue.
|
||
Comment 2•6 years ago
|
||
So they're using:
body ::selection {
background-color: #7dbcff99;
}
So they're using the selection style, setting only the background.
But I don't see the contrast issue, since for me that text is black rather than dark grey...
Reporter, two questions:
- Can you attach the page as it is on your machine? For some reason the text that's dark grey on your page is white on mine, so it looks good.
- You say you can't repro on Chrome. Is the text white in Chrome? Or only the selection? An screenshot would be great, as I can't repro a behavior difference with a test-case like:
<!doctype html>
<style>
::selection {
background-color: #7dbcff99;
}
body {
color: darkgrey;
}
</style>
Foo bar baz
- Is there any extension or preference or such that you have that could change the text color on your side?
To attach page I just click menu and "Save Page As" , correct? If not, how do I do this?
- in Chrome, that text is white, not dark grey, and it's the same no matter if I'm signed in or not
- I cleared all my history in Firefox and now that text is dark grey even when I'm not signed in... A few days ago, when I would sign out or go to r/firefox in a private tab, the issue couldn't be reprod (that's why I wrote "you must be signed-in to repro"). I've tried clearing history a few times and it seems like reddit is serving up different versions of the page, sometimes that body of text is white in Firefox, sometimes its dark grey...
Ya it really seems like reddit is serving up different versions of their site (it seems like this is only happening in Firefox though) because I keep clearing history and going to r/reddit and sometimes the text is white, sometimes it's dark grey. (you have to switch it to night mode and then reload page)
|
|
||
Comment 6•6 years ago
|
||
Yeah, I meant Save Page As, then zip the thing and attach it here using the "Attach new file" button.
(In reply to Will from comment #4)
Ya it really seems like reddit is serving up different versions of their site (it seems like this is only happening in Firefox though) because I keep clearing history and going to r/reddit and sometimes the text is white, sometimes it's dark grey. (you have to switch it to night mode and then reload page)
That is weird... But I suspect then this is not a Firefox bug but a Reddit bug :(
|
|
||
Comment 8•6 years ago
|
||
I think there's an important file missing, the HTML page. When you Save Page As, you get a foo.html file, and a foo_files directory. Seems that zip only contains the later, but the former is also pretty important.
|
|
||
Comment 11•6 years ago
|
||
Err, sorry, that was going to go to me so I don't forget to take a look tomorrow morning :)
|
|
||
Comment 12•6 years ago
|
||
So, the issue as reported is invalid... In that HTML file, in an inline stylesheet, you can see:
body ::-moz-selection {
background-color: #7dbcff99;
}
And if I make that rule use ::selection rather than ::-moz-selection then chrome behaves the same as us.
Now why are they doing that? I have an hypothesis...
If you see the attached test-case, and select some text, Chrome keeps the regular "blue background, white text" selection, and we invert the colors... My guess is that the Reddit designers didn't like it, and tried to reverse it.
So we could try to change the behavior here, not sure who's the right person to make a call here...
But also Reddit could just fix their rule so that they also set color: white... I'll mail them with this suggestion.
|
|
||
Comment 13•6 years ago
|
||
Morphing this bug to make it about aligning with other browsers in the default selection color behavior... Though I suspect our behavior is useful in some cases so not sure who's the right person to make a call here. Probably Jonathan :)
|
|
||
Comment 14•6 years ago
|
||
I sent a mail to Reddit:
Hey Reddit folks,
Somebody filed an issue about a Firefox-only Reddit issue when you enable Reddit's dark mode:
https://bugzilla.mozilla.org/show_bug.cgi?id=1576528
After a bit of digging, this seems to be due to a Firefox-only rule using ::-moz-selection:
My diagnostic is:
https://bugzilla.mozilla.org/show_bug.cgi?id=1576528#c12
Could you confirm that the automatic color inversion the issue you were fixing / working around? It may be worth investigating what other browsers do and aligning with them.
Also, could you set color: white or similar in that rule, so that Firefox users get the right contrast for darker text?
Thanks!
-- Emilio
|
||
Comment 15•6 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #12)
If you see the attached test-case, and select some text, Chrome keeps the regular "blue background, white text" selection, and we invert the colors...
Note that browsers' selection-highlighting behavior is also platform-dependent; this is what I get in Chrome on macOS, for example. So here it doesn't do a "blue background, white text" thing at all.
|
||
Updated•3 years ago
|
Description
•