Prevent Layout Shifts with CSS contain-intrinsic-size

The CSS contain-intrinsic-size property eliminates Cumulative Layout Shift (CLS) on lazy-loaded and off-screen elements by establishing explicit fallback dimensions before the actual content renders. When used alongside size containment features like content-visibility: auto, it reserves the required vertical and horizontal space in the document flow. This ensures that when delayed or asynchronous assets finally load, the surrounding page layout remains perfectly stable rather than jumping abruptly.

The Cause of Layout Shifts in Delayed Elements

When elements are deferred—whether through native lazy-loading, JavaScript-driven data fetching, or the content-visibility: auto property—the browser does not immediately calculate their full dimensions. By default, an unrendered or empty element has a computed height of 0px.

As the user scrolls and the deferred element enters the viewport, the browser downloads the content, calculates the true box dimensions, and paints it. This sudden transition from zero height to the element's rendered height pushes all following content down the page. This phenomenon degrades the user experience and negatively impacts Google's Cumulative Layout Shift (CLS) metric in Core Web Vitals.

How contain-intrinsic-size Solves the Issue

To prevent layout shifts, the browser needs to know how much space to allocate before the content exists. Standard width and height properties cannot always solve this, especially in responsive designs where components need to resize dynamically once rendered.

The contain-intrinsic-size property acts as a placeholder size specifically for elements subject to size containment (such as contain: size or content-visibility: auto). It provides intrinsic dimensions that the browser uses exclusively while the element's contents are not being rendered.

When the element is off-screen or unrendered:

1. The browser applies the dimensions defined in contain-intrinsic-size.
2. The scrollbar and surrounding layout calculate page geometry using these placeholder sizes.
3. No shifting occurs as the user navigates toward the element.

Once the element enters the viewport and renders its contents, the placeholder size is replaced by the element's actual rendered dimensions.

Syntax and Implementation

The property accepts one or two values representing width and height.

/* Sets width to 100% of container, with an estimated height of 400px */
.lazy-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

The auto Keyword

Modern implementations support the auto [length] syntax (for example, contain-intrinsic-size: auto 500px). This provides an intelligent fallback:

• Before rendering: The browser uses the provided length (e.g., 500px) as the estimated intrinsic size.
• After rendering: The browser remembers the element's actual rendered size.
• If off-screen again: If the element moves out of view and is discarded from the render tree, the browser uses the previously recorded real size instead of the estimate, completely eliminating layout shifts during repeated scrolling.

By reserving accurate layout space during asynchronous and deferred rendering, contain-intrinsic-size bridges the gap between performance optimization and visual stability.