Link hover state style flickers on multi-line links

[alex-ju]

Description of the issue

With the current line height and the new hover styles implementation, when a link spans on multiple lines we get a flickering when moving across the link. My concern is that it can be disturbing for some users (no user research evidence to support this affirmation, only personal experience).

Steps to reproduce the issue

Visit https://design-system.service.gov.uk/styles/links/#opening-links-in-a-new-tab, hover the link within that section and traverse across lines.

Actual vs expected behaviour

My expectation would be that the links would preserve the underline state without interruption between lines.

Environment (where applicable)

Combination 1

• Operating system: MacOS 11.4
• Browser: Mozilla Firefox
• Browser version: 89.0.1
• GOV.UK Frontend Version: 3.12.0

Combination 2

• Operating system: MacOS 11.4
• Browser: Google Chrome
• Browser version: 91.0.4472.114
• GOV.UK Frontend Version: 3.12.0

[lfdebrux]

Thanks for raising this @alex-ju!

I can recreate this in Safari, Chrome, and Firefox on macOS. However, I do note that the same issue is present even without the new link styles, although it is less noticeable. (Tested using a release of GOV.UK Design System website prior to use of new link styles, deploy #1632).

Kapture.2021-06-21.at.13.00.33.mp4

So I suspect this effect is not caused by any code changes from the new link styles. Still, if it can be prevented or mitigated that would be good!

[querkmachine]

Not sure what might have changed, but as of at least version 133, Firefox doesn't appear to exhibit this happening anymore. It still occurs in Safari 18.1 and Chrome 131.

All were tested on macOS 14.7 and GOV.UK Frontend version 5.8.0.

[alex-ju]

For the record, I don't mind this issue being closed. It's not a usability issue by any means, more of a curiosity on how text-decoration, text-underline-offset and line-height work together.

[querkmachine]

I don't think this is going to be practical to fix without crunching the line-height or doing something fragile involving pseudo-elements either, so I'm going to close it as unplanned.