Commit 37017bf
authored
fix(emoji): reserve square box for img.emoji to avoid CLS (#4685)
Twemoji SVGs are loaded from a CDN and the rendered <img> carries no
intrinsic dimensions. With only `height: 1.5em` set and `width: auto`,
the browser reserves zero width per emoji until each SVG downloads,
reflowing surrounding text on load and producing visible Cumulative
Layout Shift.
All Twemoji glyphs are square, so declaring `aspect-ratio: 1` lets the
browser derive the width immediately and reserve the correct box before
the SVG arrives.
Fixes #46811 parent b28610c commit 37017bf
1 file changed
Lines changed: 1 addition & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
| 3 | + | |
3 | 4 | | |
4 | 5 | | |
5 | 6 | | |
| |||
0 commit comments