Opening or closing Dialogs with scrollbar-gutter: stable results in underlying page shifts

[youssefm]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.6.1

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/headless-ui-dialog-with-scrollbar-gutter-stable-tkkjib

Describe your issue

When you use scrollbar-gutter: stable and you open a HeadlessUI Dialog, the entire background shifts unnecessarily. This appears to be caused by the padding-right that's applied to the document element. scrollbar-gutter is an important CSS property for avoiding layout shifts during page load and it's unfortunate that its use results in a jarring visual experience alongside headlessui's Dialog.

[adamwathan]

Hey! We've deprecated Dialog.Overlay due to some scroll-related challenges like what you've noticed here and solved by introducing Dialog.Panel. Check the migration guide here and see if you still have any issues:

https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v1.6.0

[youssefm]

Thanks @adamwathan. I updated the repro to use Dialog.Panel but the same problem still appears.

[RobinMalfait]

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

This should be fixed by #1457, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

Here is an updated CodeSandbox with the latest insiders build that fixes this issue: https://codesandbox.io/s/headless-ui-dialog-with-scrollbar-gutter-stable-forked-5o0y6z?file=/src/App.js

[youssefm]

Thanks for the speedy fix @RobinMalfait! I really appreciate it.

[HIT2022]

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

This should be fixed by #1457, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

Here is an updated CodeSandbox with the latest insiders build that fixes this issue: https://codesandbox.io/s/headless-ui-dialog-with-scrollbar-gutter-stable-forked-5o0y6z?file=/src/App.js

Just in case it throws others off....

The background shift youssefm described is resolved (above pic, from his repo), but at first I didn't realize that the space where the scrollbar was (before overflow: hidden) inherits background-color: #fff from html -

Which of course makes sense, but prior to realizing that, I thought the shift issue was still a problem because no color was set on html, and it was instead inheriting background-color from body -