Issue positioning popper tooltip inside scaled iframes

Question

I'm having issue positioning popper on a scaled iframe element. In the screenshot you can see that the element is wrongly positioned both on the X and Y axis. The scale is applied with a css rule transform: scale(x)

In this sandbox you can reproduce the issue using @popperjs/core 2.11.6

https://codesandbox.io/s/elastic-haze-197srf?file=/index.html

I can see that the iframe scaling should be handled here: https://github.com/floating-ui/floating-ui/blob/db4b7ad129b3f79b85184c3c30f352daab824cc3/packages/dom/src/utils/getBoundingClientRect.ts#L61

Is this a known limitation of Popper v.2? Any known workaround for this?

Thanks!

Answer 1

Turns out it's a know limitation of Popper v2.

The issue is resolved using floating-ui v1 as explained here: https://github.com/floating-ui/floating-ui/issues/2184