Weird layout shift with max-width

I have this dead simple code: 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
Chris Bolson
Chris Bolson2mo ago
I've tested this on Firefox, Chrome, Safari and Brave on Mac and I am not seeing any strange layout shift.
Kevin Powell
Kevin Powell2mo ago
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.
t1mp42mo ago
Ahhh yes... Of course!!! I knew it was something dumb like that haha. Thank you! I love your content!