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!

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

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

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 bugs.chromium.org 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.

34 Webmentions

9 likes

5 reposts

  1. Tobi Reif avatar
  2. Boris 🚀 avatar
  3. Xavier Mouton-Dubosc avatar
  4. Xavier Zalawa avatar
  5. florens avatar

20 replies

  1. Julien Wajsberg avatar Julien Wajsberg
    "Firefox on macOS doesn’t have a real fullscreen option appart from the one you can start with JavaScript" mmm then why don't you use JS ?
  2. Nicolas Hoizey avatar Nicolas Hoizey
    Because I don’t want to develop something that should be native. And the development would have to be copy/pasted everywhere I need it.
  3. Nicolas Hoizey avatar Nicolas Hoizey
  4. Julien Wajsberg avatar Julien Wajsberg
    You do cross-browser development, right ? IMO this can be part of it. Although I understand it's inconvenient.
  5. Nicolas Hoizey avatar Nicolas Hoizey
    I already lost too much time, I chose to use Powerpoint after all… 😥
  6. Julien Wajsberg avatar Julien Wajsberg
    ouch :(
  7. Jean-Pierre Vincent avatar Jean-Pierre Vincent
    bien trouvé :)
  8. Nicolas Hoizey avatar Nicolas Hoizey
    Mais que de temps perdu… 😄
  9. Jean-Pierre Vincent avatar Jean-Pierre Vincent
    bugs bugs bugs !
    Sunshine down
    So come to town
  10. Nicolas Hoizey avatar Nicolas Hoizey
    Je ne connais pas !
  11. Jean-Pierre Vincent avatar Jean-Pierre Vincent
    paroles-musique.com/paroles-Sabrin… (oui je suis parti chercher loin)
  12. Nicolas Hoizey avatar Nicolas Hoizey
    😲
  13. Peter O'Shaughnessy avatar Peter O'Shaughnessy
    Probably you have considered already and I know it’s more work, but you can get nice free emoji SVG sets like emojione, which you could make as big as you like!
  14. Nicolas Hoizey avatar Nicolas Hoizey
    I could have used SVG indeed (I love it! Hint: @esviji), but I didn’t have much time left to work on my talk, so I chose to fallback to the tool I know the best…

    Maybe next time, I’ll try again, with SVG.
  15. Lea Verou avatar Lea Verou
    Yeah, these are well known issues. Very annoying when doing talks. @googlechrome has not fixed it for years, which is severely baffling.

    However, this is a different issue completely (and the emoji is only large-ish for the video, same thing happens when it's small too)
  16. Nicolas Hoizey avatar Nicolas Hoizey
    I don’t know why they don’t fix it, indeed annoying for talks… 😉
  17. Maurice Svay 🍗 avatar Maurice Svay 🍗
    I wasn’t trying to solve this issue, but my Google Slides addon should help here too
  18. Nicolas Hoizey avatar Nicolas Hoizey
    What is your issue, exactly? I often work on Google Slides, but export to PowerPoint to present… 😅
  19. Maurice Svay 🍗 avatar Maurice Svay 🍗
    The problem in 2 images: editor vs presentation mode
  20. Nicolas Hoizey avatar Nicolas Hoizey
    That’s unfortunate, indeed! 😅