Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do emoji not render above a certain size in Chrome?

For some reason emoji do not render above a certain size in Chrome. This size seems unrelated to font-size or scale, it is just simply the pixel size of the emoji being rendered.

Since the images are not vectors, I can understand the reasoning behind not wanting them to be abnormally large, however since this only effects Chrome I am unsure.

Is this a Chrome bug, or something in the emoji standard that specifies a max intended size?

Here are two examples of non-rendering emoji:

  • http://jsfiddle.net/e6zysLg7/7/
  • http://jsfiddle.net/eyy6moLx/1/
like image 454
Jivings Avatar asked Mar 19 '15 10:03

Jivings


People also ask

How do I fix my Emojis on Chrome?

Make sure you have the latest version of Chrome installed. Type in chrome://flags in the URL bar - hit enter. Search Emoji in the search bar. You should find Emoji Context Menu > select Enabled.

How do I update Chrome Emojis?

Once relaunched, Chrome will have an “Emoji” option in the context menu. To access it, right click on the screen and you will see the option to the top of the context menu. You can then start typing to get the emoji you want to add. This is a pretty neat feature, especially for emoji lovers.


2 Answers

Is this a Chrome bug

Yes, it is. See, for example, these:

  • bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=719648
  • bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=501071
  • test page: https://tobireif.com/posts/maximum_font_size_for_emoji/

Based on a lot of testing, 54px is the current maximum font size for emoji. But I will not give up hope :)

Update October 2018:

The maximum font-size for emoji in Mobile Chrome 69 is 146px.

Screenshot: https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/14400380/snapshots/z66ee2a9e2217b4cad00

If you set it to 147px, the emoji are not rendered properly: https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/14400384/snapshots/za103323111cb78aeff2

Some additional info regarding other mobile browsers: https://tobireif.com/posts/maximum_font_size_for_emoji/

Update November 2020:

Desktop Chrome (tested on MacOS) has a bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1153296

Emoji get cut off at certain sizes (more info in the bug report). Emoji look great eg at font-size 120px.

There doesn't seem a limit to the font-size for emoji in Mobile Chrome 83. On an Android tablet, Mobile Chrome renders emoji up to eg font-size 700px. At that size the emoji are blurry, but at font-size 120px and lower they look OK, and at font-size 80px and lower they look great.

like image 191
Tobi Reif Avatar answered Sep 28 '22 22:09

Tobi Reif


I just had the same problem, and I found out that the new max font size for emojis on Android devices is 49px, not 54px as Tobi Reif stated.

I guess this is changing with every new version.

like image 33
Till Vennemann Avatar answered Sep 28 '22 21:09

Till Vennemann