Emojis borrados no Chrome

Olá! Notei um bug muito sutil, emojis estão borrados porque estão em escala reduzida. Pesquisei e isso me levou a isto:

mas nunca parece ter sido resolvido. Segui o post e testei isso no Chrome e Firefox, mas apenas o Chrome tem o problema

Para constar, as respostas combinadas do post do SO vinculado resolvem o problema:

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

:melting_face: Emoji de Exemplo

:melting_face: Texto de exemplo

1 curtida

Posso estar enganado, mas as fotos de perfil também parecem ter baixa resolução no Chrome.

1 curtida

Tenho quase certeza de que isso está relacionado à forma como o Chrome reduz a escala das imagens, se, por exemplo, você abrir o inspetor do navegador e definir um emoji para as dimensões intrínsecas (72px quadrado neste caso)… a imagem fica nítida:

Screen Shot 2022-04-13 at 11.36.03 AM

Mais alguns exemplos:

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 borrado

Screen Shot 2022-04-13 at 11.38.54 AM

Renderizamos emojis em 20px, então:

72 / 20 = 3.6 :x: emoji borrado

Screen Shot 2022-04-13 at 11.43.56 AM

Em teoria, isso desapareceria se usássemos imagens de 60px para emojis em vez de 72px? Embora eu me pergunte se isso está relacionado à densidade de pixels/escalonamento… alguns dispositivos usam 2X, alguns usam 3X :thinking:

3 curtidas

Ou podemos esperar por fontes coloridas :sweat_smile:

Estou ansioso para ver o suporte generalizado para um formato de fonte colorida. COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

4 curtidas

Não houve uma discussão sobre fontes coloridas neste tópico?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

2 curtidas

SVGs e fontes coloridas seriam uma maneira melhor de resolvê-los, mas ainda defendo a solução apenas com CSS. CSS não é minha especialidade, mas essa parece ser a que causa menos problemas.

1 curtida