Problema de emoji ao renderizar no webkit - Problema com a forma como o HTML é renderizado

Contribuir Experiência do Usuário
6

Do lado do CSS, isso é facilmente implementado:

img.emoji {
  width: auto; /* substituindo width: 20px; */
  height: 20px;
  vertical-align: text-bottom;
}

(Veja DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub para explicação.)

O trabalho mais difícil está na parte de “emoji personalizado” e na renderização de emojis:

  • emoji personalizado precisa de um atributo extra para cada emoji: aspect-ratio (ou, como alternativa, height e width).
  • a renderização de emoji deve usar o novo atributo aspect-ratio para que emojis personalizados variem a width de acordo – height permanece em 20px.

Abordagem rápida e fácil para emojis personalizados:
Para emojis personalizados, defina height="20" apenas nas tags img e não defina width – descartando assim o benefício de definir aspect-ratio/width e height.
CSS: img.emoji { width: auto; }

2 curtidas