Blurry Emojis on Chrome

AI-generated summary

A discussion on Blurry Emojis on Chrome reveals a long-standing issue with emojis appearing blurry due to Chrome’s downscaling. Arthri shares a potential CSS-only solution:

-webkit-filter: blur(0px); 
-webkit-transform: translate3d(0, 0, 0);

awesomerobot explains that the issue is related to Chrome’s image downscaling, and provides examples of how emojis become blurry when rendered at certain sizes. They suggest using 60px images for emojis instead of 72px to resolve the issue.

Others propose alternative solutions, including using color fonts (gerhard) and SVGs (Decorbuz). However, Arthri advocates for the CSS-only solution as the least breaking one.

Hello! I’ve noticed a very subtle bug, emojis are blurry because they’re downscaled. I looked it up and it lead me to this:

but it never seems to have been resolved. I followed the post and I’ve tested this in Chrome and Firefox, but only Chrome has the issue

FWIW, the combined answers of the linked SO post solves the issue:

-webkit-filter: blur(0px); 
-webkit-transform: translate3d(0, 0, 0);

:melting_face: Example Emoji

:melting_face: Example text

I might be wrong, but profile pictures also seem low resolution on chrome.

Pretty sure this is related to how Chrome downscales images, if for example, you open up the browser inspector and set an emoji to the intrinsic dimensions (72px square in this case)… the image is crisp:

Screen Shot 2022-04-13 at 11.36.03 AM

Some more examples:

72 / 36 = 2 :white_check_mark: crisp emoji

Screen Shot 2022-04-13 at 11.38.49 AM

72 / 37 = 1.945 :x: blurry emoji

Screen Shot 2022-04-13 at 11.38.54 AM

We render emoji at 20px, so:

72 / 20 = 3.6 :x: blurry emoji

Screen Shot 2022-04-13 at 11.43.56 AM

In theory this would go away if we used 60px images for emoji instead of 72px? Though I wonder if this is related to pixel density/scaling… some devices use 2X, some use 3X :thinking:

Or we can wait for color fonts :sweat_smile:

I’m looking forward to seeing widespread support for one color font format. COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

Wasn’t there a discussion about color fonts in this topic?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

SVGs and color fonts would be a better way to solve them, but I’m still vouching for the CSS-only solution, CSS is not my expertise but that seems like the least breaking one