Emojis borrosos en Chrome

¡Hola! He notado un error muy sutil, los emojis están borrosos porque están reducidos. Lo busqué y me llevó a esto:

pero parece que nunca se resolvió. Seguí la publicación y probé esto en Chrome y Firefox, pero solo Chrome tiene el problema.

Para que lo sepas, las respuestas combinadas de la publicación de SO enlazada resuelven el problema:

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

:melting_face: Emoji de ejemplo

:melting_face: Texto de ejemplo

1 me gusta

Puede que me equivoque, pero las fotos de perfil también parecen tener baja resolución en Chrome.

1 me gusta

Estoy bastante seguro de que esto está relacionado con la forma en que Chrome reduce la escala de las imágenes, si, por ejemplo, abres el inspector del navegador y estableces un emoji en las dimensiones intrínsecas (72 px cuadrados en este caso)… la imagen es nítida:

Screen Shot 2022-04-13 at 11.36.03 AM

Algunos ejemplos más:

72 / 36 = 2 :white_check_mark: emoji nítido

Screen Shot 2022-04-13 at 11.38.49 AM

72 / 37 = 1.945 :x: emoji borroso

Screen Shot 2022-04-13 at 11.38.54 AM

Renderizamos los emojis a 20 px, por lo que:

72 / 20 = 3.6 :x: emoji borroso

Screen Shot 2022-04-13 at 11.43.56 AM

En teoría, esto desaparecería si usáramos imágenes de 60 px para los emojis en lugar de 72 px. Aunque me pregunto si esto está relacionado con la densidad de píxeles/escalado… algunos dispositivos usan 2X, otros usan 3X :thinking:

3 Me gusta

O podemos esperar por las fuentes de color :sweat_smile:

Espero ver un amplio soporte para un formato de fuente de color. COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

4 Me gusta

¿No hubo una discusión sobre fuentes de color en este tema?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

2 Me gusta

Los SVG y las fuentes de color serían una mejor manera de resolverlos, pero sigo apostando por la solución exclusiva de CSS, CSS no es mi especialidad, pero esa parece la que menos interrupciones causa.

1 me gusta