Je suis à peu près sûr que cela est lié à la façon dont Chrome réduit la taille des images, si par exemple, vous ouvrez l’inspecteur du navigateur et définissez un emoji sur les dimensions intrinsèques (72px carré dans ce cas)… l’image est nette :
Quelques exemples supplémentaires :
72 / 36 = 2 emoji net
72 / 37 = 1.945 emoji flou
Nous rendons les emoji à 20px, donc :
72 / 20 = 3.6 emoji flou
En théorie, cela disparaîtrait si nous utilisions des images de 60px pour les emoji au lieu de 72px ? Bien que je me demande si cela est lié à la densité de pixels/mise à l’échelle… certains appareils utilisent 2X, certains utilisent 3X
Les SVG et les polices de couleurs seraient une meilleure façon de les résoudre, mais je plaide toujours pour la solution uniquement CSS, le CSS n’est pas mon domaine d’expertise, mais cela semble être la moins disruptive.