Text wraps unnecessarily within intrinsically-sized elements when using certain fonts and the inner HTML of the element contains a new line that is not preceded by a space (Safari Technology Preview)

[36degrees]

Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=232939 Date: 2021-11-10 Reported by: Oliver Byford Related to: https://github.com/alphagov/govuk-frontend/issues/2429

---

We're seeing an issue with text being aggressively wrapped when it doesn't need to be in Safari Technology Preview r132 and above – we've also tested with r131 and the problem does not occur there, so are fairly confident this is a regression that was introduced in r132.

This seems to be a compatibility issue with our particular font, as the problem does not occur if remove the font from our font stack and fall back to Arial.

Steps to reproduce

1. Open https://design-system.service.gov.uk in both Safari Technology Preview (r132 or later) and a current stable version of Safari (I've checked in both v15.0 (16612.1.29.41.4) and v15.1 (17612.2.91.20) and they display correctly)
2. Compare the layout in the two browsers, paying attention to how text is being wrapped

Expected results

The layout and wrapping of text should be consistent between the current stable version of Safari and Safari Technology Preview.

Actual results

Text is aggressively wrapped when it doesn't need to be in Safari Technology Preview.

So far we've observed the problem affecting:

• the logo in the header
• the product name in the header ('Design System')
• service names in the header component (https://design-system.service.gov.uk/components/header/with-service-name/index.html)
• text in the button component (https://design-system.service.gov.uk/components/button/default/index.html)
• text in the phase banner component (https://design-system.service.gov.uk/components/phase-banner/default/index.html)
• section headings in the accordion component (https://design-system.service.gov.uk/components/accordion/default/index.html)
• summary text in the details component (https://design-system.service.gov.uk/components/details/default/index.html)
• legends in fieldsets (https://design-system.service.gov.uk/components/date-input/date-of-birth/index.html)
• labels for the checkboxes and radios components (https://design-system.service.gov.uk/components/radios/hint/index.html)
• tab labels in the tabs component (https://design-system.service.gov.uk/components/tabs/default/index.html)
• tags (https://design-system.service.gov.uk/components/tag/coloured-tags/index.html)

I've marked this issue as major severity as we're not seeing this happening in other browsers and, if this regression hit a stable release of Safari it would affect the display of elements across GOV.UK – the website for the UK government.

[36degrees]

From further testing, this appears to be an issue when:

• using certain fonts – it happens with our font ('GDS Transport'), but not Roboto
• an element is intrinsically sized (e.g. display: inline-block)
• there is at least one new line anywhere within the inner HTML of the element – unless there is a space immediately before the new line

See https://codepen.io/36degrees/pen/abyjzNr for a minimum viable example of the issue.