Preventing scrollbar layout shifts

Have you ever been on a website and navigated between pages, only to notice that the layout shifts slightly because the scrollbar suddenly appears on longer pages?

I have, and it kind of bugs me. It turns out you can add a tiny bit of CSS to your website to prevent this from happening. Better yet? The CSS is actually supported in all major browsers.

html {
    scrollbar-gutter: stable;
}

Here's a comparison between a page navigation with and without this bit of CSS.

Without scrollbar-gutter

Notice how the page shifts to the left when the scrollbar appears? Yuck!

That's caused by the scrollbar creating a fixed-width gutter which the page needs to account for when positioning and rendering.

With scrollbar-gutter

The page no longer entirely shifts to the left to account for the scrollbar's fixed-width gutter. Much better!

(Ignore the navigation shifting around in this example, that's an unrelated issue and poor markup craftsmanship on my part)