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

Known issue: hover state is mis-painted on links within CSS multiple-column layouts #2204

Closed
EoinShaughnessy opened this issue Apr 26, 2021 · 2 comments
Closed

Known issue: hover state is mis-painted on links within CSS multiple-column layouts #2204

EoinShaughnessy opened this issue Apr 26, 2021 · 2 comments
Assignees
@36degrees @EoinShaughnessy
Labels
footer typography

Comments

@EoinShaughnessy
Copy link
Contributor

EoinShaughnessy commented Apr 26, 2021 •
edited by 36degrees
Loading

Description

When you hover your cursor over a link, only the thickness of that link's underline should change.

However, if you have links within a multiple-column layout and your browser uses Chromium, then hovering your cursor over a link also changes the thickness of other, non-hovered link underlines.

image

Occasionally, the underline on some links may disappear entirely.

This issue will affect you if:

How to fix this issue

  • Choose not to opt in to the new link styles
  • Remove the thicker underline from links in columns by turning off the hover state
  • Change your layout so that it does not use a CSS multiple-column layout (albeit doing this could be very time-consuming)

We have reported this issue to Chromium.

In the future, when Chromium fix the bug that's causing these issues, we'll turn on link styles by default.
@EoinShaughnessy EoinShaughnessy added awaiting triage Needs triaging by team and removed awaiting triage Needs triaging by team labels Apr 26, 2021
@36degrees 36degrees changed the title Known issues: hover state changes behaviour of link underlines Known issue: hover state is mis-painted on links within CSS multiple-column layouts May 4, 2021
@36degrees 36degrees mentioned this issue May 13, 2021
Merged
@vanitabarrett vanitabarrett mentioned this issue May 13, 2021
Merged
injms added a commit to alphagov/govuk_publishing_components that referenced this issue Sep 9, 2021
@injms
Reorder the navigation lists vertically
190cc20 
Lists are easier to scan when each column is alphabetically sorted vertically.
This is possible to do automagically with CSS columns, but Chrome doesn't like
CSS columns when links are using `text-decoration-thickness` [1][2] - so another
solution was needed.

CSS Grid Layout has support going back to IE 10[3] and allows for vertical
columns as long as the number of items in the columns are known - so when the
navigation is updated the CSS controlling the grid needs to be updated.

[1]: alphagov/govuk-frontend#2204
[2]: https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
[3]: https://caniuse.com/css-grid
@injms injms mentioned this issue Sep 9, 2021
Merged
injms added a commit to alphagov/govuk_publishing_components that referenced this issue Sep 14, 2021
@injms
Reorder the navigation lists vertically
94a2b51 
Lists are easier to scan when each column is alphabetically sorted vertically.
This is possible to do automagically with CSS columns, but Chrome doesn't like
CSS columns when links are using `text-decoration-thickness` [1][2] - so another
solution was needed.

CSS Grid Layout has support going back to IE 10[3] and allows for vertical
columns as long as the number of items in the columns are known - so when the
navigation is updated the CSS controlling the grid needs to be updated.

[1]: alphagov/govuk-frontend#2204
[2]: https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
[3]: https://caniuse.com/css-grid
@36degrees 36degrees mentioned this issue Sep 20, 2021
Closed
3 tasks
@36degrees
Copy link
Contributor

It looks like this issue may have been fixed in Chrome 102 🎉

@36degrees 36degrees mentioned this issue Jun 15, 2022
Closed
1 task
@36degrees
Copy link
Contributor

Closing this issue as Chrome 102+ has reached 95%+ adoption.

@36degrees 36degrees mentioned this issue Apr 18, 2023
Closed
36degrees added a commit that referenced this issue May 10, 2023
@36degrees
Enable new link styles by default
fbd69b5 
In July 2021, we made some improvements to new link styles [1] which were released as part of v3.12.0.

We introduced these changes behind a feature flag `$govuk-new-link-styles: true` which service teams needed to set before importing GOV.UK Frontend in order to opt-in.

This was in case users:

- needed to make changes to their service to introduce these new link styles consistently
- wanted to avoid opting in if they have links within a multiple-column layout in your CSS, due to Known issue: hover state is mis-painted on links within CSS multiple-column layouts #2204

Now that #2204 has been fixed in Chromium, we can make the new link styles ‘opt-out’.

[1]: #2350
@36degrees 36degrees mentioned this issue May 10, 2023
Merged
36degrees added a commit that referenced this issue May 10, 2023
@36degrees
Enable new link styles by default
e28fa1a 
In July 2021, we made some improvements to new link styles [1] which were released as part of v3.12.0.

We introduced these changes behind a feature flag `$govuk-new-link-styles: true` which service teams needed to set before importing GOV.UK Frontend in order to opt-in.

This was in case users:

- needed to make changes to their service to introduce these new link styles consistently
- wanted to avoid opting in if they have links within a multiple-column layout in your CSS, due to Known issue: hover state is mis-painted on links within CSS multiple-column layouts #2204

Now that #2204 has been fixed in Chromium, we can make the new link styles ‘opt-out’.

[1]: #2350
romaricpascal pushed a commit that referenced this issue May 18, 2023
@36degrees
Enable new link styles by default
ce0a081 
In July 2021, we made some improvements to new link styles [1] which were released as part of v3.12.0.

We introduced these changes behind a feature flag `$govuk-new-link-styles: true` which service teams needed to set before importing GOV.UK Frontend in order to opt-in.

This was in case users:

- needed to make changes to their service to introduce these new link styles consistently
- wanted to avoid opting in if they have links within a multiple-column layout in your CSS, due to Known issue: hover state is mis-painted on links within CSS multiple-column layouts #2204

Now that #2204 has been fixed in Chromium, we can make the new link styles ‘opt-out’.

[1]: #2350
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@36degrees 36degrees

@EoinShaughnessy EoinShaughnessy

Labels
footer typography
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@36degrees @EoinShaughnessy