Проблема с эмодзи при рендеринге в Webkit — проблема с отображением HTML

Внести вклад UX
6

Со стороны CSS это легко реализовать:

img.emoji {
  width: auto; /* замена width: 20px; */
  height: 20px;
  vertical-align: text-bottom;
}

(См. объяснение на DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub)

Более сложная часть работы связана с «пользовательскими эмодзи» и их отображением:

  • для каждого пользовательского эмодзи нужен дополнительный атрибут: aspect-ratio (или в качестве альтернативы height и width).
  • отображение эмодзи должно использовать новый атрибут aspect-ratio для пользовательских эмодзи, чтобы соответствующим образом изменять width — при этом height остаётся равным 20px.

Быстрый и простой подход для пользовательских эмодзи:
Для тегов img пользовательских эмодзи устанавливайте только height="20" и не указывайте width вообще — тем самым отказываясь от преимущества задания соотношения сторон/ширины и высоты.
CSS: img.emoji { width: auto; }

2 лайка