Popover left placement is offset by scrollbar gutter when using scrollbar-gutter: stable
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
`Popover` positioning is incorrect for **left-opening** submenus when the document has a classic scrollbar and `usePreventScroll` applies `scrollbar-gutter: stable` to the root element.
The issue appears to be a coordinate-space mismatch:
- The submenu popover is absolutely positioned in `body`, so CSS resolves its `right` value against the initial containing block (ICB).
- React Aria's positioning calculation uses viewport-related dimensions, including `visualViewport.width`.
- In Chrome, with `scrollbar-gutter: stable` on the root element, `visualViewport.width` / `document.documentElement.clientWidth` include the scrollbar gutter, while the ICB used by absolute positioning does not match that value.
Related Chromium issue:
https://issues.chromium.org/issues/503187943
### 🤔 Expected Behavior?
For a left-opening submenu with `offset={0}`, the submenu should touch the parent menu with no horizontal gap.
### 😯 Current Behavior
When the document is scrollable and Chrome uses classic/non-overlay scrollbars, opening the menu applies:
```css
html {
overflow: hidden;
scrollbar-gutter: stable;
}
```
After that, the left-opening submenu is shifted horizontally and a gap appears between the parent menu and submenu.
If the document is not scrollable, the issue does not reproduce.
### 💁 Possible Solution
_No response_
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
https://stackblitz.com/edit/sgw8huxe?file=src%2FExample.tsx
### Version
react-aria-components@1.17.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
macOS
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.