Problema con emoji durante il rendering su webkit - Problema con il rendering dell'HTML

Contribuisci UX
6

Dal lato CSS questo si implementa facilmente:

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

(Vedi DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub per la spiegazione.)

Il lavoro più difficile riguarda la parte delle “emoji personalizzate” e il rendering delle emoji:

  • le emoji personalizzate necessitano di un attributo aggiuntivo per ogni emoji: aspect-ratio (o in alternativa height e width).
  • il rendering delle emoji deve utilizzare il nuovo attributo aspect-ratio per le emoji personalizzate per variare la width di conseguenza – height rimane a 20px.

Approccio rapido e semplice per le emoji personalizzate:
Per le emoji personalizzate, imposta solo height="20" per i tag img e non impostare affatto width – rinunciando così al vantaggio di impostare aspect-ratio/width e height.
CSS: img.emoji { width: auto; }

2 Mi Piace