On desktop-classic scrollbars, a long page reserves a gutter, a short page does not, and navigating between them shifts your layout sideways. The property makes the reservation explicit and stable.

html {
  scrollbar-gutter: stable;
}
/* classic overlay scrollbars keep the same rendering;
   the declaration is simply neutral there */

Why the layout jumps today

  • A classic scrollbar overlays nothing; it occupies real widths, so its appearance reflows content and shifts a centered header.
  • The most common trigger is a modal that sets body overflow hidden and lifts the scrollbar, then puts it back on close: two layout quakes per dialog.
  • Designing a 'content area' to full width on desktop visually assumes no gutter, then subtracts one; introducing it in a single scroll press is the bug you can spot.

The settings

  1. stable: reserve the gutter always, whether or not content overflows. Centered layouts stay put.
  2. stable both-edges: reserve a mirrored lane on the other side too, for true optical centering of designs that need it.
  3. Overlay scrollbar platforms (mobile, modern macOS defaults) do not reserve space, and the property is free there.

Also apply it to the body-locking modal: set the gutter on the lock target so the page does not measure the scrollbar away and then re-add it. Three words of CSS in exchange for a whole site of stillness, gacor per character.