Element-web: Emojis don't display on browser without COLR and without SBIX support

[non-Jedi]

Description

Fallback to Noto Color Emoji is no longer working on browsers that
have neither COLR nor SBIX support. If I add the following to my
user-style-sheet, I can see some emoji, but the emoji within the
reaction picker still don't display.

.mx_scrollbar_overlay_noautohide {
    font-family: Nunito, 'Noto Emoji', Sans-Serif ! important;
}

Steps to reproduce

Load Riot web in a browser without COLR and without SBIX support on
Linux with Noto Color Emoji installed. Navigate to page containing emoji.

Version information

• Platform: web

For the web app:

• Browser: qutebrowser v1.6.3 ( QtWebEngine (Chromium 73.0.3683.105))
• OS: Void Linux
• URL: riot.im/develop

[non-Jedi]

As an additional note, if I load a user-stylesheet while Riot is already active, the emoji in the reaction picker are displayed correctly as well as everything else. It's only if the user stylesheet is loaded before Riot that the reaction picker emoji are special snowflakes.

[turt2live]

Related: https://github.com/vector-im/riot-web/issues/10296

@non-Jedi can we get a rageshake for this? There's some troubleshooting logs specifically for this problem which may be of use to the person who looks into this.

[non-Jedi]

done

[jryans]

Thanks for the additional details. What are the results from the ChromaCheck page if you try regular Firefox or Chrome (as opposed to qutebrowser)?

[non-Jedi]

Firefox supports SVG-in-Opentype only and Chromium supports all but SVG-in-Opentype. Qt-Webengine uses an older version of chromium internally though.

[ara4n]

this just sounds like the fallback to noto has got lost somewhere...

[globau]

This is caused by the Twemoji font – removing it from the font-family declaration on the body element resolves this issue.

[turt2live]

Presuming fixed by the new font family.