React Aria Components - Popover adding unnecessary offset when used with animation

[deebov]

Provide a general summary of the issue here

As you can see in the codesandbox the popover is adding unnecessary offset. However, after you resize the window it get into the correct position without the offset. (You have to enable "Emulate a focused page" in the deb tools so that the popover does not hide when you resize).

CleanShot.2023-10-04.at.16.54.56.mp4

🤔 Expected Behavior?

The popover's edge should be the same as the trigger's respective to the placement (left, right, top, bottom, center).

😯 Current Behavior

The popover renders with a small offset.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Go to https://codesandbox.io/s/determined-dust-gx53rd?file=/src/styles.css
2. Click the button
3. And you should see that the popover is rendered with an offset.

Version

1.0.0-beta.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Looks like transform animations such as scale don't trigger resize observers. I'm not entirely sure what we can do about this. We wouldn't just wait for the animation to end and check again, that'd result in a jarring jump from the wrong position to the correct one.

We could set 'right' instead of 'left' when positioned 'bottom right', but that wouldn't solve the problem for centered elements.

You could create a wrapper element that is already the "correct" size, then transform the contents of it. I know that's less ideal.

We could check for an animation and then use raf polling to adjust the position each frame, that might keep it in the right spot in relation to the trigger while the animation is happening.

open to other ideas

[deebov]

Hey @snowystinger! Thanks for the quick reply and the suggestion.

I've successfully applied your suggestion and it works as expected. So I'll be closing this issue for now.

[OliverJAsh]

I'm also encountering this issue.

Note achieving this "pop" effect also requires #6825 / #8119 because we need to know the cross placement to set the correct transform-origin, so I would love to draw more attention to that issue. See #8119 (comment).

---

I tried the suggestion of applying scaling to a child element, but for some reason we need @starting-style as well as [data-entering]. I would love to understand why that is? I'm confused why it's only necessary for transition styles on a child. It's not necessary for the popover element itself. Edit: opened another issue here.

Reduced test case: https://stackblitz.com/edit/vitejs-vite-wi68akhr?file=src%2Fmain.css,src%2Fmain.tsx,src%2FApp.tsx&terminal=dev