Incorrect popover placement when using css `zoom` on `body`
- 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.

### 🤔 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
Assessment
This issue has not been assessed yet.