Bug 255159 – text-decoration-skip-ink behaves inconsistently even when specifying "all"

• Status: NEW
• Component: Text

[Nick Heer]

Created attachment 465811 [details]
Screenshot showing expected behaviour (in green) and incorrect behaviour (in red) on same page

When using text-decoration-skip-ink:auto or :all, the text-decoration sometimes still clashes with descenders. 

It is an inconsistent bug. Sometimes, I see both the correct and incorrect behaviours within the same page, as in the attached screenshot (website is my own, https://pxlnv.com). In this case, bold text appears to be composited correctly but normal weight text is not.

I assumed this was due to the font-weight or size, but it does not appear to be the case. Playing with this CodePen (https://codepen.io/andyadams/pen/YMKqrN) indicates text-decoration-skip-ink will behave as expected in Safari even down to very small font sizes of about 9px.

Furthermore, upon refresh, even the bold text shown in the attached screenshot will sometimes composite unexpectedly.

I have tried text-decoration-skip-ink:auto and text-decoration-skip-ink:all. Both are inconsistent. I have been able to reproduce this in Safari Version 16.4 (18615.1.26.11.22) and Safari Technology Preview Release 167 (Safari 16.4, WebKit 18616.1.8.2) on MacOS 13.3 (22E252), and in Safari up to iOS 16.5 (20F5028e).

For comparison, text-decoration-skip-link behaves expectedly in Chrome running on the same MacOS system.

[Radar WebKit Bug Importer]

<rdar://problem/108055472>

Reproduced when using custom font. With some fiddling in dev tools it rerenders correctly. Not that that is helpful.

Removing `unicode-range` from the custom font seems to improve chances of it rendering correctly.