Fix invisible footer on Open Government Licence logo in forced colors mode #2273
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 OGL logo in order for it to correctly inherit the color from the parent [5]. 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
footer-ogl-logo-forced-color-mode
branch
from
d594e26
to
b82ca21
Compare
vanitabarrett
approved these changes
Jul 9, 2021
This was referenced Jul 15, 2021
Merged
EoinShaughnessy
changed the title
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.
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 OGL logo in order for it to correctly inherit the color from the parent.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.Fixes #2272