adobe / adobe/react-spectrum

RAC submenu is positioned with few pixels off when document has scrollbar on Chrome

Open
#8,584 2 comments 0 reactions 0 assignees View on GitHub
bug Overlay Positioning Overlays
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

On Chrome, when the document has a scrollbar, a RAC submenu is positioned unexpectedly away from or close to (depending on the placement side) the parent menu. Prop `offset` affects the rendering position, but cannot fix the displacement. Firefox/Safari has no such issue.

### 🤔 Expected Behavior?

Take `offset={0}` as an example, the submenu should be placed right beside the parent menu without any gap or overlap, no matter whether the document has scrollbars or not.

### 😯 Current Behavior

The submenu is placed several pixels away from the parent menu when it is placed on the left, or close to the parent menu when it is placed on the right.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

A repro: https://stackblitz.com/edit/vitejs-vite-c7y3zmis?file=src%2FApp.jsx

### Version

react-aria-components 1.10.1

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS Sequoia 15.5

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