[RAC] Tooltip is misaligned when using a CSS scale transition animation on [data-entering]

Provide a general summary of the issue here

Hello! First, thank you for the awesome lib!

To be direct, I found that the Tooltip component doesn't center when there's a scale transition animation on [data-entering]. The smaller the initial scale, the more it shifts to the right.

🤔 Expected Behavior?

That the Tooltip is animated and respects the "placement" prop, without layout shifts.

😯 Current Behavior

If the "placement" prop is set to "top", "top right", "bottom", or "bottom right", its position becomes incorrect, shifting further to the right.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Here's a sandbox that shows it more clearly:

https://codesandbox.io/p/devbox/bug-report-react-aria-tooltip-flwz8v?file=%2Fsrc%2FApp.tsx

Version

react-aria: 3.40.0 / react-aria-components: 1.9.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

can you check if this is a duplicate? #8174

I believe this issue is more similar to #5195. The scale transition does the same thing with the popover in the case of this issue. It seems the transfrom transition doesn't trigger the resize observer listeners.

The solution you recommended at the time seems to be the source of another problem, which is actually presented in this #8174, namely the inability to apply transitions to child elements (I personally haven’t tested this to confirm in this case).