Skip to content

Weird blank scrollbar space next to side modal when mouse plugged in (on Mac)Β #3322

Description

@david-crespo

Look at the right edge. It appears when the mouse is plugged in, disappears when it's not. Charlie and Joe didn't see it because they didn't have a mouse plugged in.

See mui/base-ui#4645

Image

πŸ€– Fable explanation

Found it β€” the scrollbar-gutter: stable isn't in our CSS at all. It's injected by Base UI's dialog scroll lock. When the side modal opens, useScrollLock in @base-ui/utils sets scrollbar-gutter: stable plus overflow: hidden on <html> (node_modules/@base-ui/utils/esm/useScrollLock.js:32), and restores the original values on close. The point is to hide the page scrollbar while the modal is open without the content reflowing into the freed-up space.

Why only you see it: the property still only has a visible effect with classic scrollbars. On your machine (mouse plugged in, or "Show scroll bars: Always"), the scrollbar is a real ~15px column β€” when the modal opens, the scroll lock hides the scrollbar and the stable gutter keeps that 15px reserved, so you see an empty strip where the scrollbar was. Your colleagues on trackpads have overlay scrollbars with zero width, so the same code produces no visible change. Cross-browser and extension-independent because it's driven by the macOS scrollbar mode, not browser state.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions