Emoji character is horizontally misaligned when using COLR font

• Component: Text
• Status: NEW ---

[Nolan Lawson]

Created attachment 464247 [details]
Screenshot of Chrome, Firefox, and Safari TP

When using the Twemoji Mozilla COLR font [1], Safari Technology Preview Release 160 (Safari 16.4, WebKit 18615.1.14.3) renders certain emoji characters with the wrong alignment inside of a flexbox container with `align-items: center; justify-content: center;`.

Minimal repro: https://nolanlawson.github.io/webkit-emoji-font-repro/

Note that the fourth character (☺️) is not horizontally centered, whereas the other characters are.

This issue only repros in Safari. In Firefox and Chrome, all emoji characters are rendered with the correct horizontal center alignment. (See attached screenshots.)

Based on my testing, this only repros with a custom COLR font (not the built-in Apple Color Emoji font), and only certain emoji characters are misaligned: ☺️, 😐, ♥️, 👍️, etc.

[1]: https://github.com/mozilla/twemoji-colr/releases/tag/v0.7.0

[Nolan Lawson]

Created attachment 464248 [details]
Repro HTML and TTF file

[zalan]

Thank you for filing this bug report! It looks like the preferred width computation has some issues with fallback fonts. It fails with any flexing type of layout (e.g. shrink to fit) ->

.emoji {
 float: left;
 font-size: 22px;
 font-family: MozillaTwemojiColr;
 border: 1px solid black;
}

[zalan]

This is about measuring the emoji character. ComplexTextController returns 24px for Apple Color Emoji font, while 44px for MozillaTwemojiColr.
When measured using MozillaTwemojiColr, ComplexTextController sees 2 glyphs U+263A and U+FE0F (variant selection) and they advance 22px individually.
Myles, do you know what's going on here?

[Radar WebKit Bug Importer]

<rdar://problem/103764035>