Closed Bug 1666059 Opened 4 years ago Closed 3 years ago

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

Categories

(Core :: CSS Parsing and Computation, defect)

80 Branch
defect

Tracking

()

VERIFIED FIXED
100 Branch
Accessibility Severity s2
Tracking Status
firefox-esr91 --- wontfix
firefox98 --- wontfix
firefox99 --- wontfix
firefox100 --- verified

People

(Reporter: msradel, Assigned: emilio)

References

(Blocks 1 open bug, Regression)

Details

(Keywords: access, regression)

Attachments

(5 files)

Attached image Firefox Plex.jpg (deleted) —

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.

Attached image IE Plex.jpg (deleted) —

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

Flags: needinfo?(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

Flags: needinfo?(msradel)

Assigning "Core: Layout" component.

Component: Untriaged → Layout
Product: Firefox → Core
Blocks: hcm
Attachment #9177630 - Attachment mime type: text/plain → text/html

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...

Status: UNCONFIRMED → NEW
Ever confirmed: true
Regressed by: 1625036
Has Regression Range: --- → yes
Summary: text not visable when background is black → Plex overlays a transparent button on top of text, causing invisible text in high contrast mode

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

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.

Flags: needinfo?(svoisen)

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

Flags: needinfo?(svoisen)
Severity: -- → S2
Keywords: access
Attachment #9177630 - Attachment description: Reduced test-case → Reduced test-case (needs to be viewed in high-contrast mode)

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

Flags: needinfo?(dholbert)
Whiteboard: [access-s2]

(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.)

Flags: needinfo?(dholbert)
Attachment #9177630 - Attachment description: Reduced test-case (needs to be viewed in high-contrast mode) → Reduced test-case (needs to be viewed in high-contrast mode in order to show the bug)

I was wondering if this issue is still in developement?

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

Flags: needinfo?(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.

Flags: needinfo?(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.

Severity: S2 → S3

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.

Flags: needinfo?(dholbert)

Comment 16 still applies, I think.

Flags: needinfo?(dholbert)

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.

Assignee: nobody → emilio
Status: NEW → ASSIGNED
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/1b1df0fb2320 Honor background-color: transparent in forced colors mode. r=morgan

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)"
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/760aa9e16c91 Honor background-color: transparent in forced colors mode. r=morgan
Flags: needinfo?(emilio)
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 100 Branch

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

Status: RESOLVED → REOPENED
Resolution: FIXED → ---

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.

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

Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/4d1ab24c2912 Really honor background-color: transparent in HCM even for form controls. r=morgan
Status: REOPENED → RESOLVED
Closed: 3 years ago3 years ago
Resolution: --- → FIXED
Component: Layout → CSS Parsing and Computation
Regressions: 1762018
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Accessibility Severity: --- → s2
Whiteboard: [access-s2]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: