scrollbar-gutter = auto | stable | always
Chrome 94 has supported scrollbar-gutter.
While I understand that Safari users generally have overlay scrollbars, which aren't currently relevant to the scrollbar-gutter property, it would be a nice addition to Safari (and other WebKit browsers) for the users who do have non-overlay scrollbars.
Worth noting the syntax has also changed to
auto | stable && both-edges?
Firefox 97 (probably) will support scrollbar-gutter. https://groups.google.com/a/mozilla.org/g/dev-platform/c/pAh2tDhBFOU/m/wQBctGKCCwAJ
Working in nightly.
Created attachment 457683 [details]
Comparison of a modal dialog in a browser with scrollbar-gutter support and Safari Technology preview ithout scrollbar-gutter support causing a visual glitch
Adding scrollbar-gutters for Safari would help us developers a lot.
A very common usecase which would benefit from scrollbar-gutters are modal dialogs & drawers. (e.g.: mobile burger menus, newsletter registration dialogs, ...)
Most of the time the requirement is to disable the body/window scrolling while a dialog or drawer is active. This can be done with overflow:hidden however this will always cause the entire page to jump/flicker as the width for the entire viewport changes.
I attached a video which shows this behaviour for Safari (jumping) vs Chrome (no jumping thanks to scrollbar-gutters)
`scrollbar-gutter` also affects the cases in LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html