Chrome fails showing big emojis

It was the first time I really tried to use Web technologies instead of Powerpoint to create slides for a talk. The aim was to be able to demonstrate some cool responsive images features right inside the slides. But when I tried to put big emojis is these slides to emphasize reactions to these features, I discovered Chrome didn’t show some of them!

Nicolas Hoizey

I tried in Firefox, and it did show the emojis without any issue. Unfortunately, Firefox on macOS doesn’t have a real fullscreen option appart from the one you can start with JavaScript, so I had to use Chrome.

I found the maximum font-size after which Chrome didn’t show the emojis anymore was 128px:

Chrome doesn’t show emoji for a font-size above 128px

Chrome doesn’t show emoji for a font-size above 128px

I tried to circumvent this issue by scaling an emoji with a lower font-size, using CSS transformations, but it didn’t work either:

Chrome doesn’t show a 65px emoji scaled twice either

Chrome doesn’t show a 65px emoji scaled twice either

It looked like the render size was the limit, instead of the actual font-size.

Here is the code I used, you can put it directly in the URL field of your browser:

data:text/html;charset=utf-8,<body><p style="margin: 0; font-size:128px">128px: %F0%9F%98%B1</p><p style="margin: 0;font-size:129px">129px: %F0%9F%98%B1</p><p style="margin: 0;font-size:65px; transform: scale(2); transform-origin: top left">65px * 2: %F0%9F%98%B1</p>

Then, I discovered the emoji where shown when I put the browser window on another screen, I was really astonished:

I had forgotten my MacBook 12” screen was a Retina one, which means there were twice the pixels of a standard screen.

So it looks like the actual physical pixels Chrome doesn’t want to fill with emojis is above 256px.

I found the issue had already been reported on by Tobi Reif, so I added my own test case to help fix it.

Tobi had encountered this issue on Chrome mobile on Android, as he showed on his own test case, for a font-size above 54px. He used a Samsung Galaxy S6, which has a 4 pixel ratio, so the threshold for him was a rendering size of 54 * 4 = 216 pixels.

I wonder why it differs from Chrome desktop, it would be nice to test this on several devices to understand more what happens.

Originally published at

Nicolas Hoizey

Written by

Web addict, co-founder and innovation director @CleverAge, amateur photographer, game developer @esviji

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade