https://log.csswg.org/irc.w3.org/css/2017-01-13/#e761977 scrollbar-gutter = auto | stable | always
<rdar://problem/30153666>
Chrome 94 has supported scrollbar-gutter. https://www.chromestatus.com/features/5746559209701376
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