Skip to content

Commit 37017bf

Browse files
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 #4681
1 parent b28610c commit 37017bf

1 file changed

Lines changed: 1 addition & 0 deletions

File tree

extensions/emoji/less/forum.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
img.emoji {
22
height: 1.5em;
3+
aspect-ratio: 1; // reserve a square box while the SVG loads to avoid layout shift (CLS)
34
margin: 0 .1em;
45
vertical-align: -0.3em;
56
}

0 commit comments

Comments
 (0)