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-transform: translate3d(0, 0, 0);
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:
Some more examples:
72 / 36 = 2
72 / 37 = 1.945
We render emoji at 20px, so:
72 / 20 = 3.6
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
Or we can wait for color fonts
In Chrome 98, the Chrome and Fonts teams have added support for COLRv1, an evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and...
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?
(I was inspired to inquire about this after learning about
the recent changes made to Google Chrome regarding how it handles emojis)
After briefly searching through Discourse Meta, was unable to find out if the emojis built into Discourse are SVGs or not, but if they aren’t, then I see no reason why they shouldn’t be.
Could somebody please set this straight for me? Thanks in advance!
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