nextui-org
[BUG] - Layout shift when opening Modal or Select
HeroUI Version
2.7.2
Describe the bug
As previously reported in https://github.com/heroui-inc/heroui/issues/1027, there is a layout shift in the background when opening a Modal or Select component. This happens both locally and on the actual HeroUI documentation page.
Your Example Website or App
https://www.heroui.com/docs/components/select
Steps to Reproduce the Bug or Issue
- Go to Select or Modal component
- Open Selection or Modal
- Notice the layout shift
Expected behavior
There should be no layout shift.
Screenshots or Videos
https://github.com/user-attachments/assets/a4acc187-708d-44d1-b23b-e7e563a2af9c
Operating System Version
macOS Sonoma
Browser
Firefox
![linear[bot] avatar](https://avatars.githubusercontent.com/in/20150?v=4 "Published by a pub.dev verified publisher"){kind=small}
from my side I couldn't seethe layout shifting on Firefox
I get it on Safari and Chrome as well.
@wingkwong Judging by recent comments in the #1027 issue, there seems to be multiple people who still run into this. And it looks really bad. So would really appreciate if we can find out what's causing this.
Out of interest, what does your setup look like (OS etc.)?
I'm using mac OS ventura and couldn't reproduce across different browsers. By pure guess, I think some users by default would have a scrollbar on their browser, when they open the select, the scrollbar is hidden causing the layout shift.
I'm using mac OS ventura and couldn't reproduce across different browsers. By pure guess, I think some users by default would have a scrollbar on their browser, when they open the select, the scrollbar is hidden causing the layout shift.
Doesn't the scrollbar show for you? It always shows for me when there's overflow 🤔 Does it only show for you once you scroll? I guess that could be the issue then
Because the scrollbar toggles between showing and hiding, the scrollbar has a width. It might be possible to prevent scrolling only by intercepting scroll events, rather than by hiding the scrollbar through the style.
+1
The same problem with Dropdown. However, there is no such problem in Popover.
I also have this issue in my Chrome browser. It should be caused by the display and hiding of the scroll bar. Calculating the current width of the scroll bar when the component is opened and then compensating for the layout should solve the problem.
I can confirm that I also encounter this issue with the Select modal window, where an extra scroll appears in some layouts when a value is selected. To reproduce these defects, use a mobile phone.
when open modal have style in line { color-scheme: dark; padding-right: 16px; overflow: hidden; }
but CSS padding-right: 16px; not working cause
html { font-size: 16px; padding: 0 !important; <====== !important on The reason for this line overflow-x: hidden; scroll-padding-top: 64px; }
Dude
https://github.com/user-attachments/assets/3f7951dc-406a-4cff-926d-7f7ab56273f2
I am so tired to make this UI kit work. Question: Why the hell u would use hook to add dynamic "padding-right" to html tag?
In my case it is pretty bad, i'm sure this bug came right after we upgraded from NextUI to HeroUI
https://github.com/user-attachments/assets/8d713f1a-62e6-4aeb-81fa-aa2fc2966bc5
I was able to prevent this issue from happening setting this on my main css file
html { padding-right: 0 !important; overflow: visible !important; }
Those styles are being applied whenever a select is open, but i don't know what's the need for those. Without that everything works just fine. I'm still testing other HeroUI's components to see if something broke.
This is still an issue on the latest version (2.7.8). It seemed weird to me why it would add this padding only on chrome. @schrodd's fix seem to work wonderfully, I hope it doesn't break anything else (although I don't see why it would)
best and most elegant solution for me is:
html {
scrollbar-gutter: stable;
}
