[useScrollLock] Backdrops not covering scrollbar area in macOS

[hexcowboy]

Bug report

Current behavior

The backdrop seems to not cover the area where the scrollbar is.

This happens with either "Automatically based on mouse or trackpad" and "Always" scrollbar behaviors in macOS

Expected behavior

This is Radix behavior no matter what scrollbar behavior is selected:

Reproducible example

Reproduced in live docs.

Base UI version

Version 1.4.0

Which browser are you using?

Reproduced in Chrome and Safari

Which OS are you using?

macOS

Which assistive tech are you using (if applicable)?

N/A

[mj12albert]

Seems to be a scroll lock issue (happens with menu, select as well), I can repro in Safari but Chrome is fine:

[atomiks]

This is an intentional tradeoff in the scroll-lock implementation.

When a dialog opens, removing the page scrollbar changes the document’s available width with classic/inset scrollbars, which causes layout shift for position: fixed elements. We use the scrollbar-gutter/stable-gutter approach so opening a dialog does not move the page underneath it for fixed elements. The tradeoff is that, on platforms with inset scrollbars, the scrollbar gutter can remain visually outside the backdrop instead of being covered by it.

See #604 (review) for why we made this decision. The conclusion there was that the scrollbar not being covered is not ideal visually, but avoiding layout shift is the safer default for end-user UX because developers don't take into account the right padding for fixed elements. Covering the scrollbar area usually means going back to manual scrollbar-width compensation, which is easy to get wrong and often causes unrelated fixed-position UI to shift. Radix has that exact issue while Base UI doesn't. So this is currently expected behavior.