Skip to content

Commit

Permalink
Fix invisible start button chevron in forced color mode
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
36degrees committed Jul 15, 2021
1 parent b0e6732 commit 6cfab47
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/govuk/components/button/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,9 @@
vertical-align: middle;
flex-shrink: 0;
align-self: center;
// Work around SVGs not inheriting color from parent in forced color mode
// (https://github.com/w3c/csswg-drafts/issues/6310)
forced-color-adjust: auto;
}

@if $govuk-use-legacy-font {
Expand Down

0 comments on commit 6cfab47

Please sign in to comment.