Bug 167335 – Implement scrollbar-gutter

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Myles C. Maxfield]

https://log.csswg.org/irc.w3.org/css/2017-01-13/#e761977

scrollbar-gutter = auto | stable | always

[Radar WebKit Bug Importer]

<rdar://problem/30153666>

[Woody Lee]

Chrome 94 has supported scrollbar-gutter.
https://www.chromestatus.com/features/5746559209701376

[Luke Warlow]

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?

[Luke Warlow]

Firefox 97 (probably) will support scrollbar-gutter. https://groups.google.com/a/mozilla.org/g/dev-platform/c/pAh2tDhBFOU/m/wQBctGKCCwAJ

Working in nightly.

[Jan Nicklas]

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

[Jan Nicklas]

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)

[cathiechen]

`scrollbar-gutter` also affects the cases in LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html