How to Inspect and Control CSS contain-intrinsic-size in Safari Web Inspector

Modern frontend web development prioritises rendering performance and Core Web Vitals, particularly Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP). To speed up initial page loads on long, content-rich pages, developers frequently deploy content-visibility: auto. This property instructs browser engines to skip the rendering, styling, and layout calculations of off-screen DOM elements until the user scrolls them into the viewport. However, because deferred off-screen elements collapse to an effective height of zero, page scrollbars can jump wildly and layout shifts occur as new elements render. To solve this problem, CSS Containment Module Level 2 provides contain-intrinsic-size. Using Safari Web Inspector on macOS, developers can evaluate computed placeholder geometry, inspect size containment, and debug layout shifts in WebKit.

How contain-intrinsic-size Mitigates Cumulative Layout Shift

When an element is assigned content-visibility: auto (or contain: size), the layout engine treats the container as empty when calculating off-screen geometry. Without an explicit height or aspect ratio, the container collapses to 0px height. As the user scrolls downward and the element approaches the viewport edge, WebKit suddenly performs layout and rendering, expanding the element to its true height (e.g. 450px). This sudden expansion shifts all subsequent content downward, causing severe scroll jumping and degrading CLS performance scores.

The contain-intrinsic-size property acts as a placeholder dimension. It informs WebKit: “While this element’s internal layout is deferred or size-contained, treat its intrinsic width and height as these specified dimensions for layout calculations.” Furthermore, modern CSS supports the auto <length> syntax, allowing WebKit to automatically remember the element’s actual rendered size once it has been rendered once, preserving scrollbar stability when scrolling back up.

Enabling Safari Web Inspector on macOS

To inspect layout containment and intrinsic sizing in Safari:

1. Open Safari on macOS and access Settings (or press Cmd + ,).
2. Click the Advanced tab.
3. Ensure Show features for web developers is checked.
4. Right-click the target deferred content block on your webpage and choose Inspect Element to open Web Inspector.

Locating and Inspecting Size-Contained Elements

In the Elements tab of Safari Web Inspector, select the parent element utilising content containment. A typical modern implementation resembles:

<div class="content-feed">
  <article class="feed-card">
    <img src="product.jpg" alt="Product Card" />
    <h3>High Performance Workstation</h3>
    <p>Detailed system specifications and hardware overview.</p>
  </article>
</div>

With accompanying CSS rules:

.feed-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 350px;
  margin-bottom: 24px;
}

Notice the shorthand syntax: contain-intrinsic-size: auto 350px sets the intrinsic width to none (or default) and the intrinsic height to an initial placeholder of 350px, while instructing WebKit’s layout engine to record the real rendered height once visible.

Toggling and Editing contain-intrinsic-size in the Styles Panel

Safari Web Inspector enables real-time editing of CSS containment rules to observe how placeholder dimensions affect the page layout and scrollbar:

1. With the .feed-card element selected in the DOM tree, navigate to the Styles panel in the right sidebar.
2. Locate the contain-intrinsic-size declaration. Disable the checkbox beside the rule to simulate what occurs without placeholder sizing.
3. Scroll down the page. Notice how the scrollbar thumb visibly stutters and shifts position as off-screen elements abruptly expand from 0px to full size.
4. Re-enable the rule and edit the value:

   contain-intrinsic-size: 500px 400px;

5. Observe that WebKit immediately reserves a 500px wide by 400px high placeholder box for the element, preventing any layout shift on the elements below it.

Inspecting Computed Box Models and Intrinsic Dimensions

To confirm that WebKit is correctly applying the intrinsic sizing parameters during layout calculations, switch to the Computed panel:

1. Filter the computed property list by typing contain-intrinsic into the search field.
2. Inspect the calculated values for the constituent longhand properties:
   • contain-intrinsic-width: Displays the computed inline placeholder dimension (e.g. auto 500px or none).
   • contain-intrinsic-height: Displays the computed block placeholder dimension (e.g. auto 350px).
3. Check the Box Model diagram in Web Inspector. When an element is off-screen with content-visibility: auto, the box model diagram reflects the intrinsic size dimensions rather than an empty 0px box.

Auditing Layout Shift with Safari Web Inspector Timelines

To measure the tangible real-world benefit of contain-intrinsic-size on rendering stability:

1. Open the Timelines tab in Safari Web Inspector.
2. Select the Rendering & Layout instrument.
3. Click the Record button and scroll down the webpage across several deferred cards.
4. Examine the recorded frame timeline. Without contain-intrinsic-size, the timeline displays repeated red layout shift warnings and reflow recalculations. With accurate contain-intrinsic-size declarations, layout shifts are virtually eliminated, confirming optimal Core Web Vitals delivery across Safari on macOS and iOS.