-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
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
Layout shift when in docs sidebar when scroll bar appears #5254
Comments
Agree this kind of layout shift is quite annoying. We also have one when opening the search modal due to scrollbar locking. This CSS property will likely solve the issue and be adopted soon, but for now it has 0% browser support 😅 : https://www.bram.us/2021/07/23/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property Temporarily, we can try to add some extra padding when scrollbar is not here so that there's no width change when this happens |
Turns out that simply removing the
So the question is, how useful is a persistent scrollbar? |
doesn't fix this for me @Josh-Cena it only fixes it with macos general setting that hides scrollbars unless during scroll. In french: Looks like what you have here? |
I have the first option too so I guess it depends on other factors like my mouse? |
Actually disabling my mouse and using the trackpad solve the issue with this class removed and the "automatic" setting. So it's not a very reliable solution. |
Most likely, since I'm using trackpad; probably mouse causes the scroll bar to be always visible? On the other hand, I have no clue why removing it makes the scroll bar float above the main container while before it squeezes in its own width. |
I have the same issue, but it happens only when there is a title longer than one row of text. When the title is "Što je dinamičko programiranje?" ("What is dynamic programming?") I have this issue: When the title is "Uvod" ("Introduction"), the issue is gone: I've tried both in beta-4 and beta-6, the behaviour is the same |
Same here |
could temporarily set Kapture.2021-10-14.at.11.12.16.mp4 |
Thanks @argyleink, will see if it's a good temp solution for us. Having a scrollbar always visible is not so great but if it affects only a small number of users that can be good enough. (for issue context, I asked how to solve this here: https://twitter.com/sebastienlorber/status/1448708892511416320) |
This looks consistent with our experience and @Josh-Cena's, so our temporary fix will be to shorten the title text length. With the addition of the scroll bar, titles that were previously only one row of text, become two, which is where we see the problem. I'll see if we can think of any creative solutions on our side to actually fix this. |
🐛 Bug Report
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
When a category is expanded, causing the scroll bar to appear, the container is also pushed narrower. This also occasionally causes word wrapping to change, creating an even more visible shift.
Have you read the Contributing Guidelines on issues?
Yes
Steps to reproduce
It's already observed on the Docusaurus site. Navigate to https://docusaurus.io/docs, and expand the "Guides" section. On my screen, this is enough to show the scroll bar. All the arrows on the right are now pushed inwards by 7px (284px -> 277px), creating a quite visible shift.
Below is a more significant demo:
Another bug that this demo exposes: when the container narrows, some text is pushed below the next category, because the next category does not move accordingly when the height changes. However, if the layout shift is fixed, it should go away as well
Expected behavior
The layout should remain consistent.
Actual behavior
The sidebar container is compressed by the scroll bar. This may be fixed by leaving some space (like 10px) as margin.
Your environment
The text was updated successfully, but these errors were encountered: