search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.21k stars 1.07k forks source link

React Aria Components Popover with container padding visual issues at placement boundary. #5977

Open adriantrunzo opened 4 months ago

adriantrunzo commented 4 months ago

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

  1. Go to the Popover with container padding example in the documentation:
  2. 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.
  3. 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

snowystinger commented 4 months ago

Thanks for the report. I was able to reproduce this as well on my Mac