Element-web: Solid color squares shown instead of emoji in 1.2.2 and 1.2.3 (Mac Desktop version)

[lascapi]

Hi, I found an issue, similar to https://github.com/vector-im/riot-web/issues/10143 :

Solid color squares shown instead of emoji in 1.2.2, worked in 1.2.1.

The emoji is actually there but isn't displayed correctly; copying it to another program makes it show up correctly over there.

• Intall the Desktop Application for Mac
• open a discution with emoji on
• there is square and not emoji

On the app

On Firefox

Other Unicode like chinese characters seems to be good.

Version information

For the desktop app:

• OS: macOS 10.11
• Version: 1.2.2 and 1.2.3

[jryans]

This is a complex tale of various libraries and versions:

• Riot 1.2.3 desktop uses Electron 4.2.6
• Electron 4.2.6 is built on Chromium 69
• Full COLR support regardless of OS support was (probably) enabled with Chromium 71
• When Riot loads, it detects COLR support as not available, so it loads the SBIX fallback fonts
• For some reason, the SBIX version is apparently being chosen by font selection even though it doesn't draw correct glyphs for you

Can you open the DevTools in Riot (Cmd-Opt-I), go to the Network tab, select the Font filter, reload the app with Cmd-R, and take a screenshot / copy a list of the font files loaded?

[jryans]

(Electron 5.0.6 is built on Chromium 73, so this could become a strong reason to upgrade.)

[lascapi]

Hi, there is fonts :

Nunito-Regular.ffae5d0.ttf | 200 | font | Tinter.js:248 | (from memory cache) | 0 ms
-- | -- | -- | -- | -- | --
Nunito-SemiBold.da07a44.ttf | 200 | font | Tinter.js:248 | (from memory cache) | 0 ms
Nunito-Bold.f7e8fbd.ttf | 200 | font | Tinter.js:248 | (from memory cache) | 0 ms
QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.5476fd3.woff2 | 200 | font | Tinter.js:248 | (from memory cache) | 0 ms
TwemojiMozilla-sbix.661486d.woff2 | 200 | font | ScrollPanel.js:731 | 0 B | 1.34 s

[noplanman]

I've got the same issue, slightly different fonts though:

[jryans]

@lascapi @noplanman Thanks for attaching the network details.

Let's try one more test. I'd like to see the result of the test site https://pixelambacht.nl/chromacheck/ inside the Riot app for you.

Here's a way to achieve that:

1. Open DevTools in Riot (Cmd-Opt-I)
2. Go to Console tab
3. Enter location.href = "https://pixelambacht.nl/chromacheck/"
4. Capture a screenshot of the result
5. Enter history.back() to go back to Riot

[noplanman]

[jryans]

Hmm, but SBIX very plainly is _not_ supported in reality... 😭 I'll try to think about what could be done here.

[jryans]

I have upgraded Riot to Electron 5, which I am hoping will fix this issue.

If you are feeling adventurous, you could try to build the develop branch of Riot to see whether it fixes this for you. Our next stable release of Riot will use Electron 5, so you can also wait for that (should be in the next few weeks).

[noplanman]

@jryans Hope it's ok to pop the question here, but is there an easy way to build the electron app using the docker image from the develop branch? Because it's the electron app that needs the testing, the web version works fine.

[turt2live]

@noplanman you don't need Docker to build the electron image. There's some instructions in the readme, however the steps are roughly: yarn install electron@5 && yarn build && yarn electron and it should give you an electron to test with (not installed over top, just long enough to verify the problem is fixed).

[noplanman]

Thanks @turt2live, thought it was more involved, but turned out to be super simple :tada:

Latest dev brings back the Emojis, awesome @jryans :muscle: