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

MunkeeJuice · 2024-05-17T21:24:43Z

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 · 2024-05-17T21:24:56Z

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 · 2024-05-18T12:13:17Z

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

keksiskela · 2024-05-19T13:47:23Z

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 · 2024-05-23T15:20:49Z

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

mpoweredo · 2024-05-25T10:01:22Z

html {
  scrollbar-gutter: auto !important;
}

seems to fix the issue

valeiras · 2024-06-13T09:52:13Z

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 · 2024-07-05T14:03:59Z

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

dbgordon09 · 2024-07-25T14:47:39Z

TL;DR:

:root:has(
    :is(
        .modal-open,
        .modal:target,
        .modal-toggle:checked + .modal,
        .modal[open]
      )
  ) {
  scrollbar-gutter: unset;
}

@valeiras' comment led me to investigate the scroll-gutter property on <html> when a DaisyUI modal is open. If you check the :root element when a modal is open you will find. 🕵️

:root:has(
    :is(
        .modal-open,
        .modal:target,
        .modal-toggle:checked + .modal,
        .modal[open]
      )
  ) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

The scrollbar-gutter: stable is the culprit that creates the gutter when a dialog is open.

Adding:

:root:has(
    :is(
        .modal-open,
        .modal:target,
        .modal-toggle:checked + .modal,
        .modal[open]
      )
  ) {
  scrollbar-gutter: unset;
}

Resolves the issue for me! 🥳

I originally thought it was a chromium user-agent stylesheet for max-height and max-width referenced by @t3dotgg in his brilliant video on it, but alas that was not the case here.

Hope this helps someone ✌️

ross-byrne · 2024-09-03T07:51:39Z

I'm having the same issue when a drawer is open. Only seems to effect Chrome based browsers. I've resolved the issue in my app with the following css:

html:has(.drawer-toggle:checked) {
    scrollbar-gutter: auto;
}

abegehr · 2024-10-07T10:18:45Z

It's worth mentioning that this only seems to occur when the scrollbar is set to "always show" in user's system preferences.
Wondering why scrollbar-gutter is set to stable by drawer-toggle in the first place 🤔

tapizquent · 2024-10-29T14:45:56Z

:root:has(
    :is(
        .modal-open,
        .modal:target,
        .modal-toggle:checked + .modal,
        .modal[open]
      )
  ) {
  scrollbar-gutter: unset;
}

This is great, but now when there actually is a scrollbar, the scrollbar disappears and there is a layout shift.

saadeghi · 2024-10-29T20:38:36Z

Well...
There's no way for CSS to check if scrollbar exists or not and add gutter only if scrollbar exists.

If modal adds gutter

if there's scrollbar, all good.
if there's no scrollbar, layout will shift

if modal doesn't add gutter

if there's scrollbar, layout will shift
if there's no scrollbar, all good

So it's a tradeoff. But since the majority of websites have a vertical scroll, option 1 would make more sense, which is the default in daisyUI.

This is not an issue on Android, Mac, iOS, some Linux systems since the scrollbar doesn't occupy a physical space in the first place. It's only an issue on Windows and some Linux systems where scrollbars occupy a physical space.

I am aware of this issue but doing each of first or second method have their own side effects, we should go with safer option, in favor of majority.

In the upcoming version of daisyUI (5) it will be possible to choose if you want gutter or not.

przwr · 2024-11-13T17:07:23Z

I have the same issue - was able to patch it with

html {
  scrollbar-gutter: auto !important;
}

seems to fix the issue

It fixes issue for me, because I don't use top level scrollbar anyways.

I found out that issue is present since DaisyUI version 4.7.0
The issue with Modal doing the same was also fixed with this CSS snippet. For modal, I found out that bug was introduced in version 4.10.0

MunkeeJuice changed the title ~~bug: Modal Dialog Cause Add None Existent Scrollbar Spacing To Backdrop~~ bug: Modal Dialog Adds A None Existent Scrollbar Spacing To Backdrop May 17, 2024

atty303 mentioned this issue May 25, 2024

Modal dialog adds a none existent scrollbar spacing to backdrop atty303/pob-web#65

Closed

anfeichtinger mentioned this issue Sep 22, 2024

Modal background does not cover empty space on the right side robsontenorio/mary#637

Closed

saadeghi mentioned this issue Oct 31, 2024

bug: modal bug - the bottom page moves one scroll unit to the left #3171

Closed

saadeghi added the v5 label Oct 31, 2024

Ektoplasme mentioned this issue Dec 11, 2024

Feature/admin/admin popup WildCodeSchool-CDA-FT-2024-09/JS-CDA-Projet-2-Team-C#87

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MunkeeJuice commented May 17, 2024

github-actions bot commented May 17, 2024

MunkeeJuice commented May 18, 2024

keksiskela commented May 19, 2024

simonechebelnome commented May 23, 2024

mpoweredo commented May 25, 2024 •

edited

Loading

valeiras commented Jun 13, 2024

Sergiocobra commented Jul 5, 2024

dbgordon09 commented Jul 25, 2024 •

edited

Loading

ross-byrne commented Sep 3, 2024

abegehr commented Oct 7, 2024

tapizquent commented Oct 29, 2024

saadeghi commented Oct 29, 2024

przwr commented Nov 13, 2024

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

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

Comments

MunkeeJuice commented May 17, 2024

What version of daisyUI are you using?

Which browsers are you seeing the problem on?

Reproduction URL

Describe your issue

github-actions bot commented May 17, 2024

MunkeeJuice commented May 18, 2024

keksiskela commented May 19, 2024

simonechebelnome commented May 23, 2024

mpoweredo commented May 25, 2024 • edited Loading

valeiras commented Jun 13, 2024

Sergiocobra commented Jul 5, 2024

dbgordon09 commented Jul 25, 2024 • edited Loading

ross-byrne commented Sep 3, 2024

abegehr commented Oct 7, 2024

tapizquent commented Oct 29, 2024

saadeghi commented Oct 29, 2024

przwr commented Nov 13, 2024

mpoweredo commented May 25, 2024 •

edited

Loading

dbgordon09 commented Jul 25, 2024 •

edited

Loading