[Webkit-unassigned] [Bug 232939] New: Text wraps unnecessarily when using certain fonts

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=232939

            Bug ID: 232939
           Summary: Text wraps unnecessarily when using certain fonts
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Mac (Intel)
                OS: macOS 11
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: oliver.byford at digital.cabinet-office.gov.uk
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 443798

  --> https://bugs.webkit.org/attachment.cgi?id=443798&action=review

Safari 15

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. I've attached screenshots for comparison, as well as a version where we fall back to Arial and the problems no longer occur.

We're tracking this internally at https://github.com/alphagov/govuk-frontend/issues/2429.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211110/4ef96ee4/attachment.htm>