17

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:

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jivings
  • 22,834
  • 6
  • 60
  • 101
  • 2
    FYI: These don't show at all on Chrome on Windows 8.1 or Mac. They appear as boxes. – James Donnelly Mar 19 '15 at 10:28
  • @James Donnelly: That's what the question is saying. – BoltClock Mar 19 '15 at 10:34
  • @BoltClock the question says that they don't render above a certain size. They don't render **at all** in Chrome for Windows or Mac because Emojis aren't supported yet (unless you've manually installed a supporting font yourself). – James Donnelly Mar 19 '15 at 10:36
  • @BoltClock only after a certain size. The samples show a range of sizes, some show, the larger ones don't. – Jivings Mar 19 '15 at 10:36
  • @James Donnelly: Oh. I remember Chrome saying they shipped with some emoji support recently - but knowing Chrome, it might well be inaccurate. – BoltClock Mar 19 '15 at 10:37
  • @BoltClock my Chrome is all up-to-date (41.0.2272.89 m). Here is a comparison between Chrome and Firefox on Windows 8.1: http://i.imgur.com/fsuJsEq.png – James Donnelly Mar 19 '15 at 10:38
  • 2
    Emoji do render (below said size limit) in Chrome 41 on Mac. – joews Mar 19 '15 at 10:39
  • 1
    @joews Apparently the reason it wasn't working before version 41 in Chrome on Mac was because of a bug. But yes, they've only just now been added to Chrome for Mac, but aren't available on Windows yet. Emojis are supported globally on iOS, whereas they have to be individually supported by the browser on Windows. – James Donnelly Mar 19 '15 at 10:41
  • Opened a bug in the Chromium project [here](https://code.google.com/p/chromium/issues/detail?id=468765&q=emoji&colspec=ID%20Pri%20M%20Week%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified). – Jivings Mar 19 '15 at 15:41
  • I'm not sure this is just a chrome bug. It certainly appears in Google docs on Android as well. It's definitely a rendering problem, as scaling the documents (or webpage) causes the emoji to disappear at certain sizes. – MikeCoverUps Apr 22 '18 at 09:03
  • It most definitely is a Chrome bug and there are several bug reports still open regarding the issue (see accepted answer). – Jivings Apr 23 '18 at 02:09

3 Answers3

11

Is this a Chrome bug

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

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.

Tobi Reif
  • 173
  • 2
  • 10
  • It doesn't seem fixed yet, and this question was from 2 years ago so I wont hold my breath – Jivings May 13 '17 at 06:02
  • Since nothing seems to have changed regarding the status of the bug you may as well have the correct answer! – Jivings May 13 '17 at 06:03
  • @Tobi: It has been fixed in Chrome 67+ (tested with Chrome Canary): https://bugs.chromium.org/p/chromium/issues/detail?id=719648#c17 – nathan Mar 30 '18 at 15:46
  • @nathan I had observed the issue in Chrome on Android (see the bug description you linked). Did you test on Android? – Tobi Reif Apr 01 '18 at 09:20
  • Could you try testing with the Canary build (https://play.google.com/store/apps/details?id=com.chrome.canary) and report back ? Don't have an Android (test page: https://codepen.io/anon/pen/wmjmrV) – nathan Apr 01 '18 at 14:27
  • Unfortunately that's not an option. Instead I'll wait for Chrome Stable 67, then I'll check the fix, then I'll update https://tobireif.com/posts/maximum_font_size_for_emoji/ and https://bugs.chromium.org/p/chromium/issues/detail?id=719648 and this page here. – Tobi Reif Apr 02 '18 at 17:45
  • In 2022 it's still a bug in Chrome on Windows. If I show any emoji above size 182px then all emojis disappear regardless of size. Version 98.0.4758.102 – Curtis Feb 19 '22 at 06:20
  • @Curtis You could add that as related info to https://bugs.chromium.org/p/chromium/issues/detail?id=1153296 , or you could report the issue separately at https://bugs.chromium.org/p/chromium/issues/entry . – Tobi Reif Feb 20 '22 at 11:49
3

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.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Till Vennemann
  • 31
  • 1
  • Will check in Chrome 67. – Tobi Reif Apr 02 '18 at 17:58
  • Status 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/ – Tobi Reif Oct 01 '18 at 15:49
  • 3
    2019 funny also native android (TextView) has the same problem, i guess the bug is on Android core native rendering layer :) – rupps May 05 '19 at 17:14
  • See the update at https://stackoverflow.com/a/43889981/1607310 . – Tobi Reif Nov 27 '20 at 20:24
2

Chrome font developer here. For large font size emoji we'd recommend using a COLRv1 color vector font, for example Noto Emoji from Google Fonts. From Chrome 100, (compare issue comment) these are rendering sharply at very large font sizes. From this version you shouldn't see any other scaling or disappearing large emoji issues anymore either.

drott
  • 752
  • 6
  • 17