CSS contain-intrinsic-size and content-visibility

The CSS contain-intrinsic-size property acts as a placeholder sizing mechanism for elements that use size containment, most notably when paired with content-visibility: auto. By default, skipping the rendering of off-screen content causes layout collapse, which results in erratic scrollbars and layout shifts during scrolling. This article explains how contain-intrinsic-size works, why the scroll-jumping issue occurs, and how providing estimated dimensions preserves layout stability and ensures a smooth scrolling experience.

The Problem: Scroll Jumping with content-visibility

The content-visibility: auto property is a powerful performance feature that instructs the browser to skip the layout, styling, and paint operations for elements until they are close to entering the viewport. This dramatically reduces initial page load times and memory consumption on content-heavy pages.

However, when content-visibility: auto is applied, off-screen elements are treated as having size containment with no rendered contents. Consequently, their height effectively collapses to 0px (or whatever minimal height their non-content properties dictate). As a user scrolls down the page:

  1. Off-screen elements enter the viewport area.
  2. The browser renders the element, expanding its height to accommodate its contents.
  3. The total scroll height of the document suddenly increases.
  4. The scrollbar thumb shrinks, shifts unpredictably, or jumps, creating a jarring user experience where content unexpectedly moves under the cursor.

What is contain-intrinsic-size?

The contain-intrinsic-size property provides an explicit, intrinsic fallback dimension (width and height) for elements affected by size containment. It tells the browser how much space to reserve for an element before its actual contents are rendered.

Instead of collapsing to zero, an off-screen element assigned this property maintains a defined placeholder geometry.

Syntax

You can define both dimensions, a single value applied to both, or use the auto keyword:

/* Single value: sets both width and height */
contain-intrinsic-size: 500px;

/* Two values: width and height */
contain-intrinsic-size: 100% 450px;

/* With the auto keyword */
contain-intrinsic-size: auto 450px;

How contain-intrinsic-size Stabilizes Scrolling

By assigning an estimated height via contain-intrinsic-size, the browser can calculate an accurate overall page height from the start, stabilizing the scroll mechanics.

1. Accurate Document Height

When every off-screen section reserves space roughly equal to its rendered height, the scrollbar thumb accurately reflects the true length of the document upon initial load.

2. Elimination of Scrollbar Thrashing

Because the document height does not drastically change every time a new section enters the viewport, the scrollbar thumb maintains a consistent size and position. The user does not experience sudden jumps while dragging the scrollbar or scrolling quickly.

3. Dynamic Precision with the auto Keyword

Estimating a fixed height (such as 500px) helps, but real-world content often varies in height. The auto keyword solves this discrepancy:

.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

When using auto [fallback-size]:

  • Before rendering: The browser uses the fallback size (500px) to reserve space.
  • After rendering: Once the element enters the viewport and renders, the browser remembers its actual rendered size.
  • When scrolling past: If the element moves off-screen again and its rendering is unloaded, the browser uses the remembered actual size rather than the original fallback estimate.

This creates a self-correcting layout that minimizes shifts to the initial pass only, achieving pixel-perfect scroll stability for any subsequent scrolling throughout the page.