Is it possible to prevent the browser scrollbar disappearing when a select is opened?

[NickWoodward]

When the select components are opened they hide the browser scrollbar. This is fine in firefox, but in chrome it leads to content shifting, which I personally hate. Perhaps this is a mistake on my part, or there's a simple fix, but if not is there any way to prevent this behaviour, or otherwise prevent the content from shifting?

pl-[calc(100vw-100%)] (edit: or w-[100vw]) on the fixed content stops it from jumping, but the background still covers where the scrollbar was.

See the Header in this demo: https://codesandbox.io/p/devbox/tmsykz?file=%2Fsrc%2FApp.tsx%3A7%2C42

Thanks :)

[snowystinger]

I think you're running into this #1216
can you see if any of the workaround mentioned in that issue solve the issue for you?

[NickWoodward]

Hi Robert, thanks for the quick reply.

Yeah you're right, I've the same problem as pascalduez.

I don't know what problems it might cause in other browsers, but a combination of 100vw and overflow hidden on the body has worked for me in chrome and FF

So:

• 100vw on any fixed elements
• 100vw on the html
• overflow-x hidden on the html

Demo: https://codesandbox.io/p/devbox/tmsykz?file=%2Fsrc%2Fstyles.css%3A7%2C22

I'll post it over in that other thread too

Nick

[NickWoodward]

Ugh, it was working. Refreshing the page has broken it again :/
I don't understand how that's possible :D

7iomka's reply looks interesting, but I don't really understand it.
I want to say that something like w-[calc(100vw-(100vw-100%))] should work, but it doesn't seem to (and is especially unlikely as 100vw now seems buggy)

[NickWoodward]

Fingers crossed replacing 100vw with pl-[calc(100vw-100%)] on the fixed element seems to have worked:

Codesandbox Demo

This time w-[100vw] and overflow-x hidden on the body