Popover scroll issues

[vankhoawin]

Hi team, running into some weirdness about Popover and scrolling. In the first picture you'll see that the Popover is in the correct placement, but after scrolling down the page a bit, it seem to not be attached to the component it encompasses.

Scrolled to the top

Scrolled a bit down

[gloriliale]

Hi @vnguyen94! That is certainly unexpected, thanks for letting us know. Is there any way we could see the code that the screenshots are from?

[vankhoawin]

yup! should be up at https://console.twilio.com/?frameUrl=/console/phone-numbers/search

[vankhoawin]

oh for the code, let me link you on Slack

[andioneto]

Hi @vnguyen94 👋
To follow up from our conversations on Slack, the tooltip uses position: absolute; which requires a relative parent.

Below you can see that the div that contains the iframe is styled as position: relative;:

However children of the iframe do not inherit styles from the container, so its position property is the default value (as it is not explicitly set), which you can see below:

The tooltip is then relative to the containing div, rather than the contents of the iframe.
We suggest that the body be styled as position: relative; to fix this unexpected performance.

Please let us know if you have anymore questions, and thanks for reaching out! 🙌