mui / mui/base-ui

[drawer] Scroll lock applies html `scrollbar-gutter: stable`

Open
#4,645 8 comments 2 reactions 0 assignees View on GitHub
component: drawer
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Bug report

## Current behavior

- `html.style.scrollbarGutter = "stable"` is applied while the drawer is open
- A visible gutter appears outside the drawer
- The gutter belongs to the page root, not the drawer

## Expected behavior

- no visible gutter outside the drawer
- gutter compensation should not be visible for side drawers
- a prop/config should exist to disable this behavior
-
## Reproducible example

1. Open https://base-ui.com/react/components/drawer
2. Open the right-side drawer example
3. Inspect `html`
4. Observe inline style: `scrollbar-gutter: stable`
5. Notice the reserved gutter/blank strip outside the drawer

## Base UI version

^1.3.0

## Which browser are you using?

Chrome

## Which OS are you using?

Ubuntu & Windows

## Which assistive tech are you using (if applicable)?

Voiceover/JAWS etc.

## Additional context

This may be intentional for layout shift prevention, but for side drawers the reserved root gutter becomes visibly detached from the drawer and looks broken

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.