[Bug]: Modal jumps horizontally when closing (on Windows)

[pimski]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.0.0

What browser are you using?

Chrome on Windows 10

Reproduction repository

https://www.youtube.com/watch?v=aYMffRukfCA

Describe your issue

If you have a modal component that is centered horizontally and the page has a vertical scrollbar the modal jumps to the left when you close it.

Headlessui adds padding-right to compensate for "hiding" the scrollbar when a modal opens. Which is good, since it prevents annoying page jumps. However, when you close the modal the padding is removed while the hiding animation is not finished yet. This causes the modal to jump to the left.

My guess is, the padding should be removed after the animation.

Ps. I used a dialog from tailwindui to test the headlessui components.

[lkbr]

There's a video of the jump in this comment: #365 (reply in thread)

[Andrey-Bazhanov]

It can be fixed like this: https://codesandbox.io/s/headlessui-dialog-scroll-jumping-fix-f6uxv?file=/pages/index.js

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed in the latest version! However, make sure to cleanup some of Dialog code. For example, you don't require an open and static prop anymore (more info: https://headlessui.dev/react/dialog#transitions).

[pimski]

Thanks Robin! Can confirm it works now (after updating the modal code to the latest example on TailwindUI)