scrollbar-gutter
One declaration on the root element takes care of the whole class of problems that end with somebody writing JavaScript to measure the scrollbar.
Open a modal, lock the body, and the page underneath jumps sideways by about 15px. Close it and it jumps back.
Locking the body removes the scrollbar. The viewport gets wider by exactly the scrollbar’s width and so everything centered on the page moves. The usual fix is to measure window.innerWidth - document.documentElement.clientWidth in JavaScript and add that much padding to the body while the modal is open.
Or you can put this on the root element instead.
html {
scrollbar-gutter: stable;
}That reserves the space whether or not there’s a scrollbar to put in it. The jump is gone, and so is the measuring code.
It also fixes the quieter version of the same thing, the one nobody files a bug about. On some sites the short pages are centered 15px to the left of the long ones because only the long ones have a scrollbar. Once you have seen it you cannot unsee it, and I am sorry.
stable both-edges reserves the space on both sides so things stay symmetrical. I think it’s mostly for when you’re already doing something unusual.
It only applies to classic scrollbars that take up layout space. On macOS with overlay scrollbars there’s nothing to reserve and nothing changes. Which means you very likely won’t see this working on your own machine. It’s still doing its job on most of the machines that visit the site, though.