1666059 - Plex overlays a transparent button on top of text, causing invisible text in high contrast mode

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[msradel]

Attachment: Firefox Plex.jpg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0

Steps to reproduce:

I use a Win 10 Theme with white text and black background. On some websites the text does not show becuase it displays in the color black.

Actual results:

I can not see the text.

Expected results:

I should be able to see the text.

Comment 1

[msradel]

Attachment: IE Plex.jpg

Comment 2

[Hani Yacoub, Desktop QA]

Could you please provide a test website that we could use to reproduce the issue?
Thanks.

Comment 3

[msradel]

(In reply to Hani Yacoub from comment #2)

Could you please provide a test website that we could use to reproduce the issue?
Thanks.

Site: Plex.tv

I'm accessing the Plex server on my local network, but that should have no affect except you can't access. Do you have a Plex account? I could give you remote access.

Michael

Comment 4

[Hani Yacoub, Desktop QA]

Assigning "Core: Layout" component.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case (needs to be viewed in high-contrast mode in order to show the bug)

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Grr, so this broke in bug 1625036, where we fixed another kind of black-on-black issue... :(

Basically, Firefox now ensures that text inside form controls is legible, but Plex is doing something weird where they're overlaying a fully-transparent button on top of the text you're actually supposed to read... But we're making the button not transparent (so that if there's text inside it you can read it regardless of the background).

So I think the best way to fix is probably reversing bug 1625036 and making sure we paint a backplate with enough contrast in that case, somehow...

Comment 7

[msradel]

Thank you. I'm glad you understand the issue. I'm color blind and need a high contrast theme.

Comment 8

[msradel]

Two more important examples when using a high contrast theme does not display correctly. Images are blacked out.

Google.com - When you complete a search and select the Images tab the results display images blacked out. In the past, I was able to see Google images.

Amazon.com - When searching a product, let us say Bose Speakers, and the product is selected there is a link for the products store on Amazon. For example, “Bose” is displayed below the product name. Click on the link. All the product images are blacked out. In the past, I was able to see Amazon images.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Can you please file different bugs for these? Feel free to cc me and I can dig into them.

Comment 10

[msradel]

I can not view "Do you see me" in high contrast mode, but it displays in normal windows theme.

Comment 11

[Daniel Holbert [:dholbert]]

(In reply to msradel from comment #10)

I can not view "Do you see me" in high contrast mode, but it displays in normal windows theme.

Same here. That behavior-difference is the bug. (The text isn't visible in high-contrast mode, but Plex needs it to be visible. Plex is just a more complicated version of the attached testcase.)

Comment 12

[msradel]

I was wondering if this issue is still in developement?

Comment 13

[msradel]

CHecking on a status update on this issue. THank you.

Comment 14

[Daniel Holbert [:dholbert]]

(In reply to msradel from comment #13)

CHecking on a status update on this issue. THank you.

No updates at the moment, sorry. (It looks like we've got an idea for how to fix this in comment 6, but nobody's actively working on it at the moment; we are a relatively small development team & are stretched somewhat thin.)

Hopefully we can get to it before too long, though.

Comment 16

[Daniel Holbert [:dholbert]]

Just discussed this with emilio in triage; unfortunately it's still not clear what a right fix would look like here, which wouldn't cause similar breakage. Reclassifying this as S3 for now, but still hoping we can come up with a fix at some point, and/or get Plex to avoid this.

Comment 17

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, [access-s2].
:dholbert, could you consider increasing the severity?

For more information, please visit auto_nag documentation.

Comment 18

[Daniel Holbert [:dholbert]]

Comment 16 still applies, I think.

Comment 19

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1666059 - Honor background-color: transparent in forced colors mode. r=morgan

See comment as for why, and linked bugs, in particular:

https://bugzilla.mozilla.org/show_bug.cgi?id=1755713#c16

And the following screenshot for example.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1b1df0fb2320
Honor background-color: transparent in forced colors mode. r=morgan

Comment 21

[Cristian Tuns]

Backed out for causing mochitest failures in test_dont_use_document_colors.html

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | layout/style/test/test_dont_use_document_colors.html | background-color transparency is preserved (transparent) - got "rgba(255, 255, 255, 0)", expected "rgba(0, 0, 0, 0)"

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/760aa9e16c91
Honor background-color: transparent in forced colors mode. r=morgan

Comment 23

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/760aa9e16c91

Comment 25

[Emilio Cobos Álvarez (:emilio)]

Err, the fix here wasn't quite right. We need to not only respect alpha if overridden, but always.

Comment 26

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1666059 - Really honor background-color: transparent in HCM even for form controls. r=morgan

I forgot we were doing this "revert-or-initial" shenanigans (which is needed
for stuff like link colors to be honored), so we need to early-return.

Use a more explicit test rather than a reftest for this.

Comment 27

[msradel]

I reported this bug and don't understand the programming side of this issue but from reading all the comments and closely related cases, the complexity in solving this issue is clear. Thank you all for your work on an issue where the outcome will have a very positive affect for me and my online experience. Michael

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4d1ab24c2912
Really honor background-color: transparent in HCM even for form controls. r=morgan

Comment 29

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/4d1ab24c2912

Comment 30

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Reproduced the issue with Firefox 98.0a1 (2022-01-31) using the attached test case from comment 5 on Windows 10x64 with High Contrast. The text from the test case is not visible on the affected build.
The issue is verified fixed with Firefox 100.0b7 (20220417185951) on Windows 10 x64. The text is visible on the attached test case from comment 5 with HC.