Layout Shifts in Patch Notes Due to Lazy‑Loaded Images & Videos

[clicktodev]

Issue

The VS Code patch notes page currently lazy‑loads images and videos without reserving layout space. As a result, the page experiences noticeable layout shifts while scrolling or when jumping to a specific section via the table of contents.

This makes the reading experience feel unstable, especially on long patch notes pages with many media elements.

Steps to Reproduce

1. Open any recent VS Code patch notes page.
2. Scroll down slowly — the text jumps as images/videos load.
3. Alternatively, click a heading in the sidebar TOC — the viewport lands at the wrong offset, then shifts once media loads.

Root Cause

Lazy‑loaded media elements do not have width/height attributes or any other mechanism to reserve space before loading. Browsers therefore cannot calculate layout ahead of time, causing cumulative layout shift (CLS).

Proposed Solutions

There are two straightforward fixes:

Option A — Add width and height attributes

This gives the browser enough information to allocate space before loading.

Option B — Apply a consistent aspect-ratio (recommended)

Setting something like:

img, video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

This ensures all media elements reserve predictable space.
It’s a simple, low‑maintenance solution that avoids needing to annotate every image manually.

Why This Works Well for VS Code Docs

• The docs already provide click‑to‑expand behavior for images and videos.
• Users who need full resolution can still expand the media.
• The inline preview only needs to maintain consistent layout, not perfect fidelity.
• A fixed aspect ratio prevents layout jumps without requiring per‑image metadata.

Expected Behavior

Scrolling and TOC navigation should not cause layout shifts. Media placeholders should maintain stable dimensions until content loads.

Environment

• VS Code website / patch notes pages
• Reproducible in all major browsers