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:
Algunos ejemplos más:
72 / 36 = 2 emoji nítido
72 / 37 = 1.945 emoji borroso
Renderizamos los emojis a 20 px, por lo que:
72 / 20 = 3.6 emoji borroso
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
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.