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

Asked 19/3, 2015 at 10:27 Answered 7/12, 2022 at 10:49

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:

Montiel answered 19/3, 2015 at 10:27 Comment(11)

FYI: These don't show at all on Chrome on Windows 8.1 or Mac. They appear as boxes. – Azarcon 19/3, 2015 at 10:28

@James Donnelly: That's what the question is saying. – Probability 19/3, 2015 at 10:34

@Probability 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). – Azarcon 19/3, 2015 at 10:36

@Probability only after a certain size. The samples show a range of sizes, some show, the larger ones don't. – Montiel 19/3, 2015 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. – Probability 19/3, 2015 at 10:37

@Probability my Chrome is all up-to-date (41.0.2272.89 m). Here is a comparison between Chrome and Firefox on Windows 8.1: i.imgur.com/fsuJsEq.png – Azarcon 19/3, 2015 at 10:38

Emoji do render (below said size limit) in Chrome 41 on Mac. – Jaguarundi 19/3, 2015 at 10:39

@Jaguarundi 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. – Azarcon 19/3, 2015 at 10:41

Opened a bug in the Chromium project here. – Montiel 19/3, 2015 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. – Ilex 22/4, 2018 at 9:3

It most definitely is a Chrome bug and there are several bug reports still open regarding the issue (see accepted answer). – Montiel 23/4, 2018 at 2:9

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.

Doscher answered 10/5, 2017 at 10:34 Comment(8)

It doesn't seem fixed yet, and this question was from 2 years ago so I wont hold my breath 😄 – Montiel 13/5, 2017 at 6:2

Since nothing seems to have changed regarding the status of the bug you may as well have the correct answer! – Montiel 13/5, 2017 at 6:3

@Tobi: It has been fixed in Chrome 67+ (tested with Chrome Canary): bugs.chromium.org/p/chromium/issues/detail?id=719648#c17 – Drying 30/3, 2018 at 15:46

@Drying I had observed the issue in Chrome on Android (see the bug description you linked). Did you test on Android? – Doscher 1/4, 2018 at 9:20

Could you try testing with the Canary build (play.google.com/store/apps/details?id=com.chrome.canary) and report back ? Don't have an Android (test page: codepen.io/anon/pen/wmjmrV) – Drying 1/4, 2018 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 tobireif.com/posts/maximum_font_size_for_emoji and bugs.chromium.org/p/chromium/issues/detail?id=719648 and this page here. – Doscher 2/4, 2018 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 – Gad 19/2, 2022 at 6:20

@Gad You could add that as related info to bugs.chromium.org/p/chromium/issues/detail?id=1153296 , or you could report the issue separately at bugs.chromium.org/p/chromium/issues/entry . – Doscher 20/2, 2022 at 11:49

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.

Proem answered 28/9, 2017 at 8:45 Comment(4)

Will check in Chrome 67. – Doscher 2/4, 2018 at 17:58

Status October 2018: The maximum font-size for emoji in Mobile Chrome 69 is 146px. Screenshot: app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/… If you set it to 147px, the emoji are not rendered properly: app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/… Some additional info regarding other mobile browsers: tobireif.com/posts/maximum_font_size_for_emoji – Doscher 1/10, 2018 at 15:49

2019 funny also native android (TextView) has the same problem, i guess the bug is on Android core native rendering layer :) – Rosaniline 5/5, 2019 at 17:14

See the update at https://mcmap.net/q/706340/-why-do-emoji-not-render-above-a-certain-size-in-chrome . – Doscher 27/11, 2020 at 20:24

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.

Remus answered 7/12, 2022 at 10:49 Comment(0)

Recommended topics

Hot tags