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/typography/#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).

https://user-images.githubusercontent.com/503614/122758452-b80e4a80-d290-11eb-83f2-5a5ecf4ea960.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!