scrollbar-gutter
One declaration on the root element, and the whole class of problems that ends with somebody writing JavaScript to measure the scrollbar.
Open a modal, lock the body, and the page underneath jumps sideways by about fifteen pixels. Close it, jumps back.
Locking the body removes the scrollbar, the viewport gets wider by exactly the scrollbar’s width, and everything centered on the page moves. The standard fix is to measure window.innerWidth - document.documentElement.clientWidth in JavaScript and add that much padding to the body while the modal is open.
html {
scrollbar-gutter: stable;
}That reserves the space whether or not there is 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, which nobody files a bug about: a site where the short pages are centered fifteen pixels 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 it on both sides, which keeps things symmetrical and is mostly for the case where you are already doing something unusual.
It only applies to classic scrollbars that take up layout space, so on macOS with overlay scrollbars there is nothing to reserve and nothing changes. Which means you will very likely not see this working on your own machine. It is still doing its job on most of the machines that visit the site.