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

[RadomirNowak]

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

[Candisqrush]

Would be very helpful for a solution to this 🙏

Any ideas on workarounds?

[liangpishu]

Are there any plans to fix this bug?

[snowystinger]

This bug would either need to be fixed https://issues.chromium.org/issues/40391865#comment9

Or every time we using any dom measurements we'd need to multiple by the zoom https://stackoverflow.com/questions/44277435/css-zoom-property-not-working-with-boundingclientrectangle

But we'd have to do that only in Chrome... so not a great solution. There are a few other suggestions which you may be able to apply on your end instead in that stackoverflow.