[Bug]: Dialog shifts to the left during close animation when scrollbar appears #2403
Description
Environment
Developement/Production OS: Linux/Manjaro
Node version: 22.14.0
Package manager: [email protected]
Reka UI version: 2.6.1
Vue version: 3.5.13
Nuxt: None
CSS framework: [email protected]
Client OS: Linux/Manjaro
Browser: Chromium 143.0.7499.169Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-6qhyfkgw
Steps to reproduce
add an animation to a dialog, open and close it while there is a scrollbar on the body element.
Describe the bug
When I added fade animations to my dialogs, I noticed, that the dialogs would jump 8px to the left when closing them.
This seems to be due to some styles being added to the body and later removed:
padding-right: 16px; margin-right: 0px; overflow: hidden; pointer-events: none;
Expected behavior
I would expect the dialog not to shift. Probably the removal of the body styles should be delayed until the dialog is done with the animation.
edit: This seems to be working correctly if the DialogOverlay has an animation as well. Is that expected behavior maybe?
Context & Screenshots (if applicable)
No response