Bug 249144 – REGRESSION (Safari 16): Hyphens in Ligatures prevent them from being rendered (zero width)

• Status: NEW
• Component: Text

Created attachment 464011 [details]
Ligature Demo with and without hyphens.

In our webfont we have ligatures with hyphens, and without. In Safari 16.1 through 16.4. (nightly build) there are issues displaying these icons.
When used directly as string inside content they get rendered in 16.4.

However, using them through a data attribute (data-icon="arrow-down", content: attr(data-icon)) does not work in 16.1+

This was tested on local Safaris, nightly webkit with playwright on windows and Browserstack.
Safari 15.6. does not have this issue.

We reproduced with our own font, as well as using the free icomoon icons.

Quick but very weird fixes include the following two options:
a) giving the element in question an invisible outline
b) appending a space at the end of the content string

When looking at the outline in 16.4 nightly build, the ligatures that use hyphens clearly have a width of zero, even though a width property is set on them.

The attachment includes an icomoon font download with demo that was updated to include a very basic setup of using data attributes for icons, both with and without hyphens.
Each Icon should be visible three times, with the 2nd and 3rd item displaying a pink outline.

[Radar WebKit Bug Importer]

<rdar://problem/103461736>