Fix invisible start button chevron in forced colors mode #2277
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When forced color mode was introduced in Chrome 89, the default user agent styles for SVGs were set to `forced-color-adjust: none` in line with the CSS Color Adjustment specification at the time [1]. Unfortunately, this means that using currentColor for stroke and fill in SVGs no longer works as expected in forced color mode. As per the comment in Chromium bug #1164162 [2]: > This is the result of one of the recent spec changes. The spec was updated to force colors at used value time rather than computed value time, which means elements that have "forced-color-adjust: none" set (like svg elements) will inherit their non-forced color values, resulting in a different currentcolor used for stroke and fill in this case than you would get if forcing was done at computed value time. > > See spec issue resolution for more details: w3c/csswg-drafts#4915 It looks like this has since been flagged as an issue with the CSS working group [3] and the spec has been updated to resolve it [4] but it’s going to take a while before that change is reflected in browsers. In the meantime, we can explicitly set `forced-color-adjust: auto` on the chevron SVG in order for it to correctly inherit the color from the parent [5]. This mimics the fix for the OGL logo in the footer made in 850c0b7. Once Chromium has been updated so that the default UA styles for SVGs use the new `forced-color-adjust: preserve-parent-color` keyword, and traffic to older versions has dropped off, we can then consider removing this. [1]: https://www.w3.org/TR/2021/WD-css-color-adjust-1-20210520/#forced-color-adjust-prop [2]: https://bugs.chromium.org/p/chromium/issues/detail?id=1164162#c4 [3]: w3c/csswg-drafts#6310 [4]: https://www.w3.org/TR/2021/WD-css-color-adjust-1-20210616/#forced-color-adjust-prop [5]: w3c/csswg-drafts#6310 (comment)
36degrees
force-pushed
the
start-button-chevron-forced-color-mode
branch
from
49f153c
to
a71781a
Compare
lfdebrux
approved these changes
Jul 16, 2021
EoinShaughnessy
changed the title
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a re-creation of #2275 which was accidentally merged into the wrong base branch.
When forced color mode was introduced in Chrome 89, the default user agent styles for SVGs were set to
forced-color-adjust: nonein line with the CSS Color Adjustment specification at the time. Unfortunately, this means that using currentColor for stroke and fill in SVGs no longer works as expected in forced color mode.As per the comment in Chromium bug #1164162:
It looks like this has since been flagged as an issue with the CSS working group and the spec has been updated to resolve it but it’s going to take a while before that change is reflected in browsers.
In the meantime, we can explicitly set
forced-color-adjust: autoon the chevron SVG in order for it to correctly inherit the color from the parent. This mimics the fix for the OGL logo in the footer made in 850c0b7 (#2273).Start link buttons
Start Buttons
Once Chromium has been updated so that the default UA styles for SVGs use the new
forced-color-adjust: preserve-parent-colorkeyword, and traffic to older versions has dropped off, we can then consider removing this.