Emoji Rendered in Chrome Have Different Widths Than in Other Browsers

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

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.

Consistent display of UTF8 emojis across browsers

This is impossible for various reasons:

• Windows officially supports multi colored fonts since 8.1. If a browser uses the font rendering of the system then results will differ by the operating system and its version already.
• Gecko engines (e.g. Firefox) and Goanna engines (e.g. Pale Moon) come with their own font(s) (which you can delete) and on top render that font themselves, instead of relying to the system. As a result even under Windows 7 the browsers render colored Emojis although the operating system itself is unable to do that.
• The default font and/or the default font for Emojis may differ as per personal settings, either in the scope of the operating system (user settings) and/or in the scope of an installation (program settings). Settings can be modified - not everybody uses the factory setting of Times New Roman as default font for websites in an internet browser. Likewise the default for displaying Emojis can be different if you leave it undefined (as per CSS).

It's as impossible as expecting a user to have installed the fonts of interest and also in the minimal version of interest: having Tahoma is one question, but having version 5.22 or 7.00 of it is yet another.

How to visually horizontally center an emoji in Chrome?

This appears to be an old Chromium rendering bug that specifically affects Retina devices. That might explain why some other posters are suggesting solutions that don't work for you!

See the bug report here: https://bugs.chromium.org/p/chromium/issues/detail?id=551420. There's no ETA on a fix, of course...

I have stumbled across something interesting playing around with font sizes though. At larger font sizes (approx 22px in my testing, but this might be dependent on a variety of factors), the problem goes away entirely.

Therefore, my suggested fix is a bit of a workaround, but should be safe for other browsers too. Double the font size, but scale it down again using transform:

.avatar {
  font-size: 30px;  /* double the size you wanted */
  ...
}

.avatar div {
  transform: scale(0.5);  /* reduce size by 50%, back to originally intended size */
}

Webfont rendering issue: browsers seem to be confused about size and position

I found the answer to my own question by contacting the creators of the problematic font. So in case anyone stumbles on this question later...

The odd behavior is caused by a few special characters that extend way beyond the usual bounderies. While I never use these characters, most browsers today seem to determine the line height based on the largest character in the font, not the largest character used.

---

Related Topics