Emojis flous sur Chrome

Bonjour ! J’ai remarqué un bug très subtil, les emojis sont flous car ils sont réduits. J’ai cherché et cela m’a mené ici :

mais cela ne semble jamais avoir été résolu. J’ai suivi le post et j’ai testé cela dans Chrome et Firefox, mais seul Chrome a le problème.

Pour information, les réponses combinées du post SO lié résolvent le problème :

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

:melting_face: Emoji d’exemple

:melting_face: Texte d’exemple

1 « J'aime »

Je me trompe peut-être, mais les photos de profil semblent également être en basse résolution sur Chrome.

1 « J'aime »

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 :

Screen Shot 2022-04-13 at 11.36.03 AM

Quelques exemples supplémentaires :

72 / 36 = 2 :white_check_mark: emoji net

Screen Shot 2022-04-13 at 11.38.49 AM

72 / 37 = 1.945 :x: emoji flou

Screen Shot 2022-04-13 at 11.38.54 AM

Nous rendons les emoji à 20px, donc :

72 / 20 = 3.6 :x: emoji flou

Screen Shot 2022-04-13 at 11.43.56 AM

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 :thinking:

3 « J'aime »

Ou nous pouvons attendre les polices couleur :sweat_smile:

J’ai hâte de voir un large soutien pour un format de police couleur. COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

4 « J'aime »

N’y a-t-il pas eu une discussion sur les polices de couleurs dans ce sujet ?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

2 « J'aime »

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.

1 « J'aime »