Skip to content

Commit

Permalink
Disable hover state for footer links in columns
Browse files Browse the repository at this point in the history
Unfortunately there's a bug in Chrome which means links are mis-painted on hover when they're within CSS columns [1]. However, most service teams do not use the multi-column layout in the footer. We know GOV.UK do use it, but are already using a different implementation which does not use CSS columns. Therefore, disable the hover style for links within columns as think this feature is rarely used, if at all.

[1]: https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
  • Loading branch information
36degrees committed Apr 30, 2021
1 parent 934a684 commit 8187b57
Showing 1 changed file with 7 additions and 0 deletions.
7 changes: 7 additions & 0 deletions src/govuk/components/footer/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,13 @@
padding: 0;
list-style: none;
column-gap: $govuk-gutter; // Support: Columns

// Disable thicker underlines on hover because of a bug in Chromium
// affecting links within columns
// https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
.govuk-footer__link:hover {
text-decoration-thickness: auto;
}
}

@include govuk-media-query ($from: desktop) {
Expand Down

0 comments on commit 8187b57

Please sign in to comment.