Stylish HTML: Avoid layout shift with scrollbar-gutter: stable

Want to avoid layout shift when you remove scrolling on popover or dialog opening? Use the scrollbar-gutter: stable CSS rule on your scroll container (likely <body>).

body {
  scrollbar-gutter: stable;
 
  &:has(:popover-open) {
    overflow: hidden;
  }
}

The problem: when a popover opens and you hide the scrollbar with overflow: hidden, the content shifts horizontally to fill the space where the scrollbar was.

A popover opening causes the page content to shift horizontally as the scrollbar disappears

The solution: scrollbar-gutter: stable reserves space for the scrollbar even when it’s not visible, preventing the jarring horizontal shift.

With scrollbar-gutter stable, the page content stays in place when the popover opens