bug: Modal Dialog Adds A None Existent Scrollbar Spacing To Backdrop

[MunkeeJuice]

What version of daisyUI are you using?

4.10.5

Which browsers are you seeing the problem on?

Chrome, Edge

Reproduction URL

https://play.tailwindcss.com/V7z8gOaVTT

Describe your issue

When a modal dialog opens the backdrop behind shifts left due to a space appearing where the y-scrollbar should be, even though it is not showing a scrollbar before the dialog is opened.

[github-actions[bot]]

Thank you @MunkeeJuice for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[MunkeeJuice]

As far as i can see this only happens on Chromium based browsers, the issue does not occur in firefox

[keksiskela]

Same behavior with drawers (the code is pretty much identical to stock navbar + drawer component); only on Chrome, and only on desktop. Seems to affect all overlays.

https://play.tailwindcss.com/Dgv6PeF5C4

[simonechebelnome]

I'm having the same problem, did anyone find a solution? I've tried overriding the ::-webkit-scrollbar pseudo class with no results

[mpoweredo]

html {
  scrollbar-gutter: auto !important;
}

seems to fix the issue

[valeiras]

html {
  scrollbar-gutter: auto !important;
}

seems to fix the issue

I tried this and it worked great! But then, when there really was a scrollbar in the background, it wouldn't create it. I finally went with:

html {
  scrollbar-gutter: stable;
}

The dummy scrollbar still appears, but there is no layout shift

[Sergiocobra]

I'm still having this same issue, is there any improvement on this?