adobe / adobe/react-spectrum

Popover left placement is offset by scrollbar gutter when using scrollbar-gutter: stable

Open
#10,131 1 comment 0 reactions 0 assignees View on GitHub
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

Image

Image

### 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

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.