popper bug or our css problem? portaled out popper brakes layout when ref el is inside pos fixed el

[karelkangro]

I am not sure if this a bug or our own css implementation problem of our overlay element

we have the case where the popper reference element is inside position: fixed, width: 100%; height: 100%; overlay element and popper element is portaled out from the Vue app and displayed as a last child of the body el

when tooltip is opened then it seems that the popper bubble affects the width/height of our overlay element though popper bubble has position: absolute set

tooltip breaks layout on mobile view and on android devices, chrome browser
https://codesandbox.io/s/mystifying-spence-lqo2c

this is our code that in some rare cases could have tooltips inside a modal
https://popperbug.netlify.app

we could fix this with modifying our overlay component css to not use width: 100%, height: 100% but width: 100vw; height: 100vh - then the layout stays as it should ...

but then, our overlay element can also be constrained inside any parent div and is not always fullscreen

made quick screencast also
https://user-images.githubusercontent.com/6916288/115820310-33768b80-a409-11eb-839b-f73aa2a82889.mp4