-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Modal Dialog Adds A None Existent Scrollbar Spacing To Backdrop #3040
Comments
Thank you @MunkeeJuice
for reporting issues. It helps daisyUI a lot 💚
|
As far as i can see this only happens on Chromium based browsers, the issue does not occur in firefox |
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. |
I'm having the same problem, did anyone find a solution? I've tried overriding the ::-webkit-scrollbar pseudo class with no results |
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 |
I'm still having this same issue, is there any improvement on this? |
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 :root:has(
:is(
.modal-open,
.modal:target,
.modal-toggle:checked + .modal,
.modal[open]
)
) {
overflow: hidden;
scrollbar-gutter: stable;
} The 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 Hope this helps someone ✌️ |
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;
} |
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.
The text was updated successfully, but these errors were encountered: