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.

[Florian Schroiff]

I created a reproduction of this behavior: https://codepen.io/editor/fschroiff/pen/019d02b7-2872-7b29-952d-8d439cdcf872

FontSource (https://fontsource.org) uses unicode ranges to split up the fonts so only the needed character sets are downloaded. This is great for when your content is mainly in Latin letters, but from time to time you have a greek or vietnamese or cyrillic word. 

Firefox and Chrome render the underline gaps correctly for all fonts in my reproduction.