Skip to content

Replace the global scrollbar gutter with JS compensation - #43283

Merged
mdo merged 2 commits into
mainfrom
mdo/fix-scrollbar-offsets
Nov 4, 2026
Merged

mdo merged 2 commits into
mainfrom
mdo/fix-scrollbar-offsets

Conversation

@mdo

@mdo mdo commented Nov 3, 2026

Copy link
Copy Markdown
Member
  • Remove the permanent viewport gutter reported in Empty space where scrollbar lives on Windows Chromium browsers with scrollbar-gutter: stable #42546. Dialog and Drawer now measure layout changes and apply temporary offsets while page scrolling is locked.
  • Keep normal-flow, sticky, and full-width fixed content in place. Detect the actual scrollbar side, and preserve existing inline values and priorities.
  • Share one scroll lock across Dialog and Drawer. Restore spacing after the last owner closes, including native close and disposal paths.
  • Add 14 regression tests and update the component and migration docs. All 1,387 unit tests pass, along with lint, builds, type checks, and integration bundles.
  • Layout checks pass in Chromium and WebKit, including fluid root font sizing. Firefox checks remain pending because the local runner cannot start its profile.

Fixes #42546

Pages with classic scrollbars reserve a permanent blank gutter even
when they do not scroll. Removing that gutter alone makes the page
shift when a dialog opens.

Measure root and full-width fixed-element expansion when locking
scroll. Restore the original inline styles after the last owner
closes. Share this lock between Dialog and Drawer, including native
close and disposal paths.
@mdo
mdo requested review from a team as code owners November 3, 2026 17:21
@mdo mdo added bug Something does not work as documented css Sass sources or compiled CSS docs Documentation site and its content js JavaScript or TypeScript sources and plugins rtl Right-to-left support v6 v6, the main branch labels Nov 3, 2026 — with ChatGPT Codex Connector
@mdo mdo added this to the v6.0.0-alpha.2 milestone Nov 3, 2026
@mdo mdo added this to v6.0.0 Nov 3, 2026
@github-project-automation github-project-automation Bot moved this to Inbox in v6.0.0 Nov 3, 2026
The new Dialog and Drawer scroll lock increases three JavaScript
bundles beyond their size limits. Raise only those limits to the next
quarter-kilobyte boundary using the existing budget update script.
@mdo
mdo merged commit 5bd7493 into main Nov 4, 2026
14 checks passed
@mdo
mdo deleted the mdo/fix-scrollbar-offsets branch November 4, 2026 05:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something does not work as documented css Sass sources or compiled CSS docs Documentation site and its content js JavaScript or TypeScript sources and plugins rtl Right-to-left support v6 v6, the main branch

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

Empty space where scrollbar lives on Windows Chromium browsers with scrollbar-gutter: stable

1 participant