bug: JANKY animation on closing modal (with proposed fix)

[thednp]

Reproduction URL (Required)

https://daisyui.com/components/modal/

What version of daisyUI are you using?

5.0.43

Which browsers are you seeing the problem on?

Chrome

Describe your issue

When you close a modal, you always get a JANKY animation (the dialog jumps left about 15px, the exact size of a scrollbar), which is horrible UX.

THE DEFINITIVE FIX:

instead of using

.modal {
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
}

you can instead do this

.modal {
  scrollbar-gutter: auto;
  overscroll-behavior: contain; /* this should be optional IMO, but I don't know what this tries to fix/cover */
}

scroll-gutter: auto; should fix any and all JANKY behaviours with popups and such. Try it let me know.

[github-actions]

Thank you @thednp 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.

[thednp]

Same as #3942

[Damix48]

Hi, I tried what you suggested but it didn't work for me. Can you share a complete example?

[thednp]

@Damix48 go to Modal Page and edit the CSS for the .modal add the following rule scrollbar-gutter: auto then toggle this rule ON/OFF, open modals and close them, you'll see the difference immediately.

[Damix48]

@thednp Thank you.
I was trying this:

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

After disabling it, your solution works perfectly.