[DOM] Element position doesn't get computed properly when `iframe` gets scaled

I have an element inside an iframe, and I’m trying to compute its position from the parent window. However, when I give transform: scale(2) to iframe element, scale doesn’t get counted. https://codesandbox.io/s/floating-ui-dom-template-forked-gz4whh?file=/src/index.js

This is how the tooltip gets rendered:

Instead, I was expecting something like this:

[jperterm]

Hi, I just wanted to mention that I have the same issue with scaling. I get extra x-/y-shifting and the higher the position of the context elements the higher is the extra x-/y-shifting.

It seems that this use-case often comes with sections of a webapp that have a scaling feature. From my side an opportunity to feed the computePosition function with x-/y-scaling numbers is sufficient as I know where those scalings are applied. But there may be others cases for which it is not.

[atomiks]

Okay so at this point, scale issues are killing me 🥲, there were 5 releases (1.0.8-1.0.12) fixing various issues with transform/scale, but I did find a solution to this iframe issue with the getScale function we now have.

Apply it to these values as @seahindeniz originally suggested:

https://github.com/floating-ui/floating-ui/blob/99d187876a42fbd7057952d3b273c0978d562770/packages/dom/src/utils/getBoundingClientRect.ts#L28-L37

  const iframe = element.ownerDocument?.defaultView?.frameElement;
  const iframeScale = iframe ? getScale(iframe) : {x: 1, y: 1};

  x *= iframeScale.x;
  y *= iframeScale.y;
  width *= iframeScale.x;
  height *= iframeScale.y;