Skip to content

Commit

Permalink
Fix link focus styles in Chromium 108+
Browse files Browse the repository at this point in the history
Chromium 108 includes a change in behaviour for box decoration when a box is split over multiple lines, pages etc [1].

This change in theory brings Chromium in line with the CSS Fragmentation Module Level 3 spec [2] but means that the box-shadow (which we rely on for colour contrast for the focus state) no longer appears on links that break over multiple lines.

This affects browsers based on Chromium 108 including Chrome 108, Edge 108 and Opera 94.

Add `box-decoration-break: clone` so that `box-shadow` is applied to each fragment independently, maintaining the existing behaviour in Chromium browsers.

[1]: https://bugs.chromium.org/p/chromium/issues/detail?id=682173
[2]: https://www.w3.org/TR/css-break-3/#propdef-box-decoration-break

Co-authored-by: Colin Rotherham <work@colinr.com>
  • Loading branch information
36degrees and colinrotherham committed Dec 15, 2022
1 parent 65bf0ac commit d188e40
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/govuk/helpers/_focused.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,8 @@
// When link is focussed, hide the default underline since the
// box shadow adds the "underline"
text-decoration: none;

// When a focused box is broken by e.g. a line break, ensure that the
// box-shadow is applied to each fragment independently.
box-decoration-break: clone;
}

0 comments on commit d188e40

Please sign in to comment.