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.

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

Update SVG styles for Windows High Contrast Mode #326

Closed
carrythebanner opened this issue May 13, 2021 · 1 comment · Fixed by #328
Closed

Update SVG styles for Windows High Contrast Mode #326

carrythebanner opened this issue May 13, 2021 · 1 comment · Fixed by #328
Assignees
Labels

Comments

@carrythebanner
Copy link
Collaborator

carrythebanner commented May 13, 2021

Chrome v89 changed how they handle SVGs in Windows High Contrast Mode (WinHCM). (See https://bugs.chromium.org/p/chromium/issues/detail?id=1164162 and w3c/csswg-drafts#4915 for origin of behavior change.)

As a result, our SVG icons aren't getting the user's high contrast theme color assignments as they previously did. This affects Chrome and Edge, and presumably any other Chromium-based browser. (Firefox continues to work as-expected.)

We can add CSS styles to enforce the intended behavior, something like:

@media (-ms-high-contrast: active), (forced-colors: active) {
  svg.icon {
    -ms-high-contrast-adjust: auto;
    forced-color-adjust: auto;
  }
}
@carrythebanner
Copy link
Collaborator Author

This is how our SVGs (icons, Shift logo in upper left) render in the latest Chrome/Edge with WinHCM enabled:
01 WinHCM - current Edge

This is how Firefox renders them, which is how Chrome/Edge used to and what I am expecting:
02 WinHCM - current FF

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant