Weird layout shift with max-width
I have this dead simple code:
https://codepen.io/t1mp4/pen/abrYzpN
Why does the horizontal position of the body change when I replace the image with text? The shift is subtle but noticeable and weird.
I have only tried it in Brave Browser (Chromium-based) and Firefox. For some reason, the layout doesn't change in Firefox, only in Brave.
When I change the image height to some other value, say 100px, the layout shift is gone for some reason.
I'm confused.
3 Replies
I've tested this on Firefox, Chrome, Safari and Brave on Mac and I am not seeing any strange layout shift.
If the viewport isn't very tall, you will have a scrollbar when the image is there. When you remove the image, the scrollbar goes away, so the page shifts slightly.
Ahhh yes... Of course!!! I knew it was something dumb like that haha. Thank you! I love your content!