The Stonemason's First Un-mortared Wall: On the Precise Alignment of a Perfectly Optimized Layout Without a `contain-intrinsic-size`

I remember the first time I saw it happen, not on a staging server or a local build, but in the wild, on a live article we’d just pushed. It was a piece about ancient masonry techniques, appropriately enough. I’d been proud of the implementation: a long, scrolling timeline built with `content-visibility: auto;` to silo off the heavy historical images and complex SVG diagrams. It was a thing of efficiency, a modern digital feat of engineering. Or so I thought.

I clicked the link on my phone, and the page painted beautifully. The header loaded, the introductory text was crisp. Then I began to scroll. And the entire page shuddered. The text I was reading jumped away from my thumb as a swath of white space, a void I had unintentionally carved out, suddenly filled with content. The scrollbar on the side shrank precipitously. It was less a smooth narrative experience and more like trying to read a book while someone randomly yanked the pages up and down. I had built a wall without accounting for the size of the stones.

In my haste to contain and optimize, I had used `content-visibility` but committed the cardinal sin of omitting its partner property, `contain-intrinsic-size`. I had told the browser, "Hey, don't render this chunk until it's needed. Just assume it's empty for now." And the browser, ever the literalist, obeyed. It calculated the layout of my entire page based on these assumed empty boxes. Then, as the user scrolled and each box was revealed, the browser had to frantically recalculate everything. The layout shifts were violent, jarring dislocations in the user's journey.

That moment was a profound lesson in the literal meaning of layout stability. It wasn't an abstract metric or a Lighthouse audit score. It was the physical, visceral feeling of the ground shifting under a reader's feet. I had been so focused on the raw speed of initial load that I forgot about the quality of the journey thereafter. I became a digital stonemason who had carefully cut each stone—each image, each font, each script—to perfection, but then failed to provide the crucial mortar of `contain-intrinsic-size` to hold them in their rightful place until the true content arrived.

Now, I see that property not as a technical suggestion, but as a promise. It’s a whispered assurance to the browser: "I know this content isn't here yet, but trust me, it will be about this tall. Plan for it. Hold this space." It’s the difference between a chaotic building site and a stable, predictable structure. That single, overlooked line of CSS was the mortar between the stones, the element that allowed efficiency and stability to coexist, ensuring the reader's scroll remained a smooth, uninterrupted path through the story.

Notes & further reading

A few pages I came back to while writing this: