vitepress
vitepress copied to clipboard
Could it be better to adjust width of some html element ?
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
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Read the Contributing Guidelines.
- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.
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.
Maybe scrollbar-gutter can solve this problem.
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.
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
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?
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
Oh, yes, Modal thing should be fixed. And yeah that makes sense. Let's fix this issue then 💪
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.