Why does my layout still shift even when I reserve space for images?

programming web dev
1

Yo Kirupa folks, I’m in the middle of tuning a feed UI and I’m trying to kill a nasty CLS issue that only shows up when the browser is busy (throttled CPU makes it obvious).

<div class="card">
  <img class="thumb" src="/img/123.jpg" alt="" loading="lazy" />
  <div class="meta">
    <h3>Title</h3>
    <p>Some text that wraps differently per card</p>
  </div>
</div>

<style>
.card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.thumb { width: 96px; aspect-ratio: 1 / 1; object-fit: cover; }
</style>

If aspect-ratio is reserving the image box, what else in the render pipeline would still cause visible shifting here (fonts, grid sizing, lazy loading behavior, something else), and what’s the most reliable way to lock this down?

1 Like
2

aspect-ratio is doing its job. The box is there.

What usually shifts is the text block next to it. A webfont landing late can change line wraps in the <h3> or <p>, so the grid row gets taller after first paint. Under CPU throttle, that delay is just easier to see.

I’ve chased this before in a feed and it ended up being the font, not the image. Check whether that view is loading a custom font, and try a fallback with similar metrics so the text doesn’t breathe as much.