search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.24k stars 345 forks source link

Link to the OGL licence in the footer reflows when focused in Safari (macOS) #5878

Closed 36degrees closed 1 week ago

36degrees commented 3 weeks ago

Description of the issue

The link to 'Open Government Licence v3.0' in the footer reflows when focused, wrapping at a different place in the line.

Steps to reproduce the issue

  1. Tab to the 'Open Government Licence v3.0' link in the footer, as part of the sentence "All content is available under the [Open Government Licence v3.0], except where otherwise stated"

Actual vs expected behaviour

Expected behaviour: The link should be focused with no other changes to its layout

Actual behaviour: The link reflows, wrapping at a different place in the line.

https://github.com/user-attachments/assets/81794d74-d4b0-429d-bc35-3447611b3301

Environment (where applicable)

36degrees commented 3 weeks ago

It looks like this is likely caused by Webkit bug #274145: text-wrap balance with box-decoration-break clone child fails. It looks like this is a technical limitation as text-wrap: balance is intentionally disabled when using box-decoration-break: clone.

We've used box-decoration-break: clone on focused links (and only focused links) since #3087 (shipped in v4.4.1) to resolve an issue where focus styles for links split over multiple lines were displaying incorrectly in Chromium.

We started using text-wrap: balance on the license information in the footer in #5332, released as part of v5.7.0.

It looks like box-decoration-break: clone may not be needed for Chromium any more – depending on when that became the case we may be able to remove it; if not we might want to revert the change to use text-wrap: balance.

A cursory search of the codebase suggests this is the only place we're using text-wrap: balance.

matteason commented 2 weeks ago

I've actually seen this happen in Chrome/Blink as well, but it seems to only occur if the govuk-footer__licence-description span contains a <br>:

https://github.com/user-attachments/assets/f531774a-715c-4db9-9a39-83562ce9aff6

Without the <br>:

https://github.com/user-attachments/assets/1b2c7b18-c55c-4c5c-a9b0-21aa79406d8b

Removing box-decoration-break: clone fixes it there too:

https://github.com/user-attachments/assets/3a5f2760-95f0-4df0-9f27-7491e877f05c

Chrome 135.0.7049.115, Windows 11 (also observed in Brave on Android)

36degrees commented 2 weeks ago

From https://github.com/alphagov/reported-bugs/issues/78 it looks like the specific issue we were seeing with the focus style of links was treated as a regression and fixed in Chromium 111.

On that basis we could consider removing box-decoration-break, depending on how much traffic we're still seeing from browsers based on Chromium 108 thru 111.

36degrees commented 2 weeks ago

Chromium 109 is unfortunately the last versions of Chromium to work with Windows 7, Windows Server 2008 R2, Windows 8, Windows Server 2012, Windows 8.1 and Windows Server 2012 R2 ^1.

This means there's a bit of a peak of users who are stuck on a version that requires box-decoration-break for the focus style of links to be displayed correctly:

Browser Version Chromium version Views in last 28 days Percentage of total views
Chrome 109 109 ~480,000 ~0.26%
Edge 109 109 ~60,000 ~0.03%
Opera 95 109 ~5,000 ~0.00%

With that in mind, in the short-term I don't think we should remove box-decoration-break from our focus styles. Instead I'm inclined to remove text-wrap: balance from the footer.