Flag emoji are broken on Chrome 131 on Windows 11... and ED (2025012301) on MacOS

[ara4n]

Steps to reproduce

🏳️‍🌈🏳️‍⚧️🏴‍☠️ is rendered as:

rather than:

(as seen on macOS 15.1.1 and Chrome 131.0.6778.70)

see https://matrix.to/#/!IemiTbwVankHTFiEoh:matrix.org/$MKDDKlox-0HdM2XsqoFYD-M3CyWGpjItUKTDjW0jkaM?via=matrix.org&via=mozilla.org&via=envs.net

Circumstantially, this may have broken at the same time that Chrome fixed #20043 (https://bugs.chromium.org/p/chromium/issues/detail?id=964527).

Outcome

What did you expect?

Flags emoji to not get split apart into components.

What happened instead?

Whichever dialect of the twemoji font Windows uses seems to render wrong on Chrome 131 + Windows 11

Operating system

Windows 11, version 23H2

Browser information

chrome: Version 131.0.6778.86 (Official Build) (64-bit)

URL for webapp

app.element.io

Application version

v1.11.86

Homeserver

matrix.org

Will you send logs?

No

[ara4n]

Keycap emoji are also broken in the same way as #28421

[kilimnik]

Same Issue on Ubuntu 24.04 using Chrome Version 131.0.6778.108 (Official Build) (64-bit)

[ara4n]

This looks likely to be https://issues.chromium.org/issues/383824583. See also googlefonts/nanoemoji#449

[ara4n]

Right, this can be worked around by defining additional ligatures in the COLR font without VARIATION SELECTOR-16 (U+FE0F) codepoints present. For instance, to get the trans flag to work, you need to add:

<Ligature components="u200d,u26a7" glyph="u1f3f3_fe0f_200d_26a7_fe0f"/>

alongside the existing:

<Ligature components="ufe0f,u200d,u26a7,ufe0f" glyph="u1f3f3_fe0f_200d_26a7_fe0f"/>

[ara4n]

fixed by matrix-org/twemoji-colr@94c6848 hopefully