[react-aria-component] Popover component magnified has some funky behaviour

[fl-y]

Provide a general summary of the issue here

Based on the following snippet with tailwind, when zooming into the UI using the trackpad(not CMD + '+'), the location of the Popover moves to the left unexpectedly

🤔 Expected Behavior?

The popover component to stay in place

😯 Current Behavior

The popover component moves to the side

💁 Possible Solution

Not sure how the inner-workings of react-aria-components works sadly

🔦 Context

Trying to keep the popover in place 👍 Screen recording Here's a screen recording if it helps

🖥️ Steps to Reproduce

'use client'

import { Button, DialogTrigger, Popover } from 'react-aria-components'

// flex flex-col items-center w-full (basically centre the component)
export const DiscoverTest = () => {
    return (
        <DialogTrigger>
            <Button>
                <p>Test</p>
            </Button>
            <Popover
                className='w-full min-w-[240px] max-w-[240px] rounded-2xl bg-base-white px-7 py-[30px]'
                placement='bottom left'>
                I am a dialog
            </Popover>
        </DialogTrigger>
    )
}

Version

N/A

What browsers are you seeing the problem on?

Chrome

If other, please specify.

, firefox, brave. Does not happen on Safari

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This is a dupe of https://github.com/adobe/react-spectrum/issues/2700, our overlay positioning code is shared between RAC and React Spectrum. We've tossed around the idea of using floating-ui to replace our positioning code as alluded to here: https://github.com/adobe/react-spectrum/pull/5205#pullrequestreview-1660677829, but we haven't had the time to prioritize a shift over to that or to revisit our positioning code to fix this issue. Please do go and thumbs up that issue though, it helps us prioritize for future planning.

[fl-y]

Thank you for explaining sir 🫡

[LFDanLu]

I'm reopening this because the original issue doesn't see to occur anymore, at least with the examples listed here: https://github.com/adobe/react-spectrum/issues/2700#issuecomment-1832858170. I do however see the popover shift over slightly as you approach a zoom level that makes the overlay hit the edge of the screen

[navin-moorthy]

Here's how it gets rendered in IOS comparing other libraries handle them well.

https://github.com/adobe/react-spectrum/assets/39694575/8f53d783-ad52-41f2-a901-982ce43aab2f