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

Fix invisible start button chevron in forced colors mode #2277

Merged
merged 2 commits into from
Jul 16, 2021
Merged

Fix invisible start button chevron in forced colors mode #2277

merged 2 commits into from
Jul 16, 2021

Commits on Jul 16, 2021

  1. Fix invisible start button chevron in forced color mode 

    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
    36degrees committed Jul 16, 2021
    Configuration menu
    Copy the full SHA
    c20c78d View commit details
    Browse the repository at this point in the history

  2. Document in CHANGELOG

    @36degrees
    36degrees committed Jul 16, 2021
    Configuration menu
    Copy the full SHA
    a71781a View commit details
    Browse the repository at this point in the history