adobe
React Aria Components Popover with container padding visual issues at placement boundary.
Provide a general summary of the issue here
I noticed this issue while reading the React Aria Components documentation, specifically for Popovers with container padding: https://react-spectrum.adobe.com/react-aria/Popover.html#container-padding. When the dialog trigger is positioned just right (on the edge of where the popover would flip to rendering from above to below), opening the popover causes it to erratically flicker on the screen (Chrome) or render the popover with no height (Firefox).
🤔 Expected Behavior?
The popover shifts to rendering below the trigger.
😯 Current Behavior
No errors in the browser console.
In Chrome 122: https://github.com/adobe/react-spectrum/assets/1218900/0292ff41-382c-4c7f-ad30-92d41fb89610
In Firefox 124: https://github.com/adobe/react-spectrum/assets/1218900/e407e2fb-1172-4ed6-8556-ea984ca8e768
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
- Go to the Popover with container padding example in the documentation:
- Adjust your scroll position to where the trigger position is close to the top of tab and should cause the popover to flip to the bottom.
- Open the popover.
Version
Whatever version the documentation is using.
What browsers are you seeing the problem on?
Firefox, Chrome
If other, please specify.
No response
What operating system are you using?
mac OS 14.3
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
