Bug 281739 – REGRESSION (Safari 18): Twemoji COLR font affects color of text after using an emoji

• Status: NEW
• Component: Text

[Gaël Poupard]

Created attachment 472982 [details]
Video screenshot showing behaviour on text selection

When using Mozilla Twemoji COLR font (converted to .woff2, if that can change anything) to display a character emoji with a zero-width joiner and a skin tone variant, skin tone color bleeds out of emoji to cover surrounding text.

Selecting surrounding text makes selected text portion to its specified color, but not unselected text. I made a video capture to show behavior on text selection.

For what it worth, bug seems to affect Safari iOS 18.0.1 (but not 17.6.1), and Safari 18.0.1 on macOS Sonoma Version 14.7 — but not on Safari 18.0.1 on macOS Ventura 13.7.

Initial reduced test cases:
- reproducing bug with COLR Font: https://codepen.io/ffoodd/pen/Vwobpwq
- same example without COLR Font, no bug: https://codepen.io/ffoodd/pen/mdNmwVL

Extended test case by [e-mail]: https://codepen.io/Rik/pen/GRVmMRj

[Anthony Ricaud]

This is not only happening with skin tone variants. My test case shows that.

It also shows that once you use an emoji with that font, the rest of the text, even lines without emojis, are affected by it.

[Alexey Proskuryakov]

It's quite curious that it redraws correctly upon clicking, word by word.

[Radar WebKit Bug Importer]

<rdar://problem/138321646>

I have provided a more detailed test report in this report https://bugs.webkit.org/show_bug.cgi?id=283340

[Alexey Proskuryakov]

I cannot reproduce this on iOS 18.4 or on macOS 15.4 any more. Maybe already fixed? Haven't tested Safari 18.4 on macOS Sonoma though.