adobe / adobe/react-spectrum

Incorrect popover placement when using css `zoom` on `body`

Open
#6,431 3 comments 0 reactions 0 assignees View on GitHub
needs investigation 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

Hi!
I'm trying to use `zoom` feature provided by css, but looks like some of the popovers that use `usePopover` hook are not rendered correctly - they are rendered out of bounds.
Please see a video where I reproduce the issue on react-aria docs website.
![chrome_X4937jp8s9](https://github.com/adobe/react-spectrum/assets/11005257/a9127ce6-23cf-4214-9154-dbde955b148f)

### 🤔 Expected Behavior?

Popovers should account for css `zoom` property when calculating their placement.

### 😯 Current Behavior

Popovers are rendered outside of `body` when its zoomed in/out using css `zoom`

### 💁 Possible Solution

_No response_

### 🔦 Context

We're trying to implement a functionality to make sure that users using smaller screens are using zoomed out version of our app, and zoomed in when they are on bigger resolution. It's a workaround until we make our app more responsive.

### 🖥️ Steps to Reproduce

1. Go to docs of `usePopover` hook -> https://react-spectrum.adobe.com/react-aria/usePopover.html#example
2. Scroll down to `Open popover` button
3. Click it to verify popover opens -> it should
4. Open browser dev tools
5. Select `body` and add property `zoom: 0.9` (works everywhere except firefox)
6. Click again on `open popover` button
7. BUG: popover is not visible

### Version

3.33.1

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

Chrome, Microsoft Edge

### If other, please specify.

_No response_

### What operating system are you using?

Windows 11

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