Bug 167335

Summary:

Implement scrollbar-gutter

Product:

WebKit

Reporter:

Myles C. Maxfield <mmaxfield>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Enhancement

CC:

augus.dupin, bfulgham, bugzilla, cathiechen, dmyers, glen.84, ik, j.nicklas, karlcow, lwarlow, rajsite, simon.fraser, steffen.weber, the.bull, tomac, vepomoc, webkit-bug-importer, woodlxf00, zalan

Priority:

Keywords:

BrowserCompat, InRadar, WPTImpact

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Bug Depends on:

266938, 256891, 256892, 257204, 257453, 257605, 257606, 257708, 258207, 258743, 258770, 259014

Bug Blocks:

Attachments:

Description	Flags
Comparison of a modal dialog in a browser with scrollbar-gutter support and Safari Technology preview ithout scrollbar-gutter support causing a visual glitch	none

Myles C. Maxfield

Reported 2017-01-23 15:32:05 PST

https://log.csswg.org/irc.w3.org/css/2017-01-13/#e761977 scrollbar-gutter = auto | stable | always

Attachments
Comparison of a modal dialog in a browser with scrollbar-gutter support and Safari Technology preview ithout scrollbar-gutter support causing a visual glitch (7.26 MB, video/quicktime) 2022-04-15 01:24 PDT, Jan Nicklas	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2017-01-23 15:32:40 PST

<rdar://problem/30153666>

Woody Lee

Comment 2 2021-09-28 20:53:11 PDT

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

Luke Warlow

Comment 3 2021-10-12 05:58:10 PDT

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

Comment 4 2021-12-17 12:41:48 PST

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

Comment 5 2022-04-15 01:24:20 PDT

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

Comment 6 2022-04-15 01:25:16 PDT

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

Comment 7 2022-10-19 09:53:45 PDT

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

Note You need to log in before you can comment on or make changes to this bug.