Reduce layout shifts with classic scrollbars

[gyhyfj]

Is your feature request related to a problem? Please describe.

There's a little different of layout among pages have y-scrollbar or not in wide screen device like desktop.
For example, if I switch pages like https://vitepress.vuejs.org/guide/theme-search.html and pages like https://vitepress.vuejs.org/guide/markdown.html , there will be a little quake , cause some components' width changed.

Describe the solution you'd like

overwrite css rule... but many place to adjust, not only #VPContent

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

There used to be some stuff like overflow-y: overlay that would prevent that layout shift in webkit browsers (edit: -ms-overflow-style: -ms-autohiding-scrollbar for IE/old edge) (if you want you can still add that on body, its deprecated but it still works on latest chrome). On Firefox, they now default to overlay scrollbars so everything already looks fine there.

[CHOYSEN]

Maybe scrollbar-gutter can solve this problem.

[kiaking]

I'm not 100% sure if we should fix this. Personally, I like it when there's no layout shift happening. However, this behaviour is how Windows works... right? I mean it happens by default to any sites, not VitePress exclusive issue.

I'm a Mac user so I don't know whole lot on how Windows users feel about this issue in general, but... wouldn't this be normal for them? In that case, fixing this issue is like hacking Windows behaviour and I don't know if that's a good idea 🤔

Anyone has insight on this? Like is there any best practice to handle scrollbar thing, or famous websites doing the same thing and people loving it and such.

[gyhyfj]

I add overflow: overlay to html and it works well now. As webkit browsers' behaviour, people don't need to care about it only if switch pages with/without scrollbar frequently.
Another solution is set display: none to scrollbar of layout, and then simulate it by div, but the problem is performance and complexity

[kiaking]

Yeah I mean I can come up with several different way to solve the layout shift too, but the question is should we fix it? (is it even a fix?) 🤔 Because isn't this how Windows work?

[zqianem]

I think this is worth fixing for the case of opening the search modal. Currently, opening the modal (Ctrl+K) on Vitepress causes a layout shift on Windows while similar functionality on other sites (e.g. Ctrl+Alt+K on GitHub, Ctrl+K on Netlify) does not.

Modal implementations in some popular component libraries also do not cause a layout shift on Windows:

• https://getbootstrap.com/docs/4.0/components/modal/#live-demo
• https://mui.com/material-ui/react-modal/#basic-modal

Edit: just rebased my PR for this and can confirm the fix still works

[kiaking]

Oh, yes, Modal thing should be fixed. And yeah that makes sense. Let's fix this issue then 💪

[zqianem]

Rebased #1844 and can confirm that the fix implemented there still works.

I tried the alternatives mentioned earlier in this thread but there are some issues with each:

• scrollbar-gutter shows the gutter above the modal scrim
• overflow: overlay shows the scrollbar above the modal scrim and doesn't prevent the underlying content from scrolling

@brc-dd and @kiaking, is there anything I can change to get this PR merged? There were some concerns mentioned on the original PR that I could try to address if more details are provided.