Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(cdk-overlay-dark-backdrop): Is solid black in Windows high contrast dark mode #21890

Closed
haywoodsloan opened this issue Feb 12, 2021 · 1 comment · Fixed by #21896
Closed

bug(cdk-overlay-dark-backdrop): Is solid black in Windows high contrast dark mode #21890

haywoodsloan opened this issue Feb 12, 2021 · 1 comment · Fixed by #21896
Assignees
@crisbeto
Labels
Accessibility This issue is related to accessibility (a11y) area: cdk/overlay G This is is related to a Google internal issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@haywoodsloan
Copy link
Contributor

Reproduction

Steps to reproduce:

  1. On a Windows machine enable high contrast mode with the black theme
  2. Using Firefox navigate to: https://stackblitz.com/edit/angular-o7autm?file=src/app/./cdk-overlay-basic-example.html
  3. Click the 'Open' button to show the overlay with backdrop enabled
  4. See the overlay is solid black and obscures the rest of the page

Expected Behavior

The overlay does not obscure the rest of the page, such as the non-HC behavior:
image

Actual Behavior

The transparent overlay backdrop is converted to a solid black color and obscures everything else on the page:
image

Environment

  • Angular: 80f4ff33381d37e72764d2ea3b7060e5952232e9
  • CDK/Material: 70ff528
  • Browser(s): Firefox
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@haywoodsloan haywoodsloan added the needs triage This issue needs to be triaged by the team label Feb 12, 2021
@crisbeto crisbeto self-assigned this Feb 13, 2021
@crisbeto crisbeto added Accessibility This issue is related to accessibility (a11y) area: cdk/overlay G This is is related to a Google internal issue has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Feb 13, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 13, 2021
@crisbeto
fix(cdk/overlay): not setting correct opacity in high contrast mode o…
fcf7ea3 
…n Firefox

The backdrop styles were never switches to the `cdk-high-contrast` mixin which means that
they won't work on Firefox. These changes switch to using the mixin and update the docs.

Fixes angular#21890.
@crisbeto crisbeto mentioned this issue Feb 13, 2021
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 13, 2021
@crisbeto
fix(cdk/overlay): not setting correct opacity in high contrast mode o…
c457d18 
…n Firefox

The backdrop styles were never switches to the `cdk-high-contrast` mixin which means that
they won't work on Firefox. These changes switch to using the mixin and update the docs.

Fixes angular#21890.
andrewseguin pushed a commit that referenced this issue Feb 18, 2021
@crisbeto
fix(cdk/overlay): not setting correct opacity in high contrast mode o…
4b8427e 
…n Firefox (#21896)

The backdrop styles were never switches to the `cdk-high-contrast` mixin which means that
they won't work on Firefox. These changes switch to using the mixin and update the docs.

Fixes #21890.
andrewseguin pushed a commit that referenced this issue Feb 18, 2021
@crisbeto @andrewseguin
fix(cdk/overlay): not setting correct opacity in high contrast mode o…
8542243 
…n Firefox (#21896)

The backdrop styles were never switches to the `cdk-high-contrast` mixin which means that
they won't work on Firefox. These changes switch to using the mixin and update the docs.

Fixes #21890.

(cherry picked from commit 4b8427e)
@dependabot dependabot bot mentioned this issue Mar 6, 2021
Closed
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 21, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
Accessibility This issue is related to accessibility (a11y) area: cdk/overlay G This is is related to a Google internal issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
2 participants
@crisbeto @haywoodsloan