Content shift when collapsing or expanding the sidebar

[yzhe819]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The displayed portion of the content changes visually when switching between the collapsed and expanded states of the sidebar. When I collapsed and then expanded sidebar at the bottom, the page display jumps from the bottom footer to the content section.

Reproducible demo

https://docusaurus.io/docs/deployment

Steps to reproduce

1. Navigate to: https://docusaurus.io/docs/deployment
2. Scroll to the bottom
3. Collapse the sidebar
4. Expand the sidebar
5. Try 3 and 4 multiple times (You can notice the vertical shift of web page content)

Demo

video1197996455.mp4

Expected behavior

No content shift when collapsing or expanding the sidebar

Need more expected details from the development team
cc @Josh-Cena

Actual behavior

Before the sidebar is collapsed, the page is at the bottom, but after the sidebar is collapsed and expanded, the page will jump to the Deploying to Layer0 section.

Your environment

• Public site URL: https://docusaurus.io/docs/deployment
• Docusaurus version used: 2.0.0-rc.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows

Self-service

• I'd be willing to fix this bug myself.

[slorber]

I see now 🤪 thanks for clarifying. The markdown page content has changed from smaller to taller.

So I'm going to move my comment here and remove it from the older issue. 👇👇👇

---

This behavior is because we toggle from max-width: 1320px to max-width: 1440px

Changing the dimension of the content container leads to some lines wrapping, leading to the layout shift. It's not the sidebar that changes height, but rather the scroll container that changes dimensions as we toggle the sidebar.

You'll notice that the layout shift is more important on larger docs, and at the bottom: this is just because there are more lines wrapping above :)

---

In the end => larger container VS no layout shift: you can only pick one of those.

I'd say the layout shift is a minor annoyance and usually we want to expand a bit the content container when more space is available.

Technically we could keep the same container size for large desktop screens, but for mobile we absolutely want to increase that container width anyway.

It wouldn't make sense to collapse the sidebar and still keep a small content container (< 500px in the screenshot above).

What I mean is: layout shifts are expected to happen, on purpose, because we want to expand the length of the lines

If you want 0 layout shift, I'd say it's your responsibility to ensure the content container keeps the exact same size. You can do that with CSS. I don't think we'd want Docusaurus to do that by default.

---

Now, a possible solution to mitigate this layout shift, particularly on very large documents where the layout shift can be significant (like the bottom of our deployment page)

• take some content node in the middle of the screen
• ensure it keeps the exact same viewport position after we have resized the container

Note we already do something similar when switching tabs (cf #5618), that can also produce layout shifts, and have some util already:

const {blockElementScrollPositionUntilNextRender} = useScrollPositionBlocker();

This won't prevent new line wraps in the visible viewport. Not even sure it's worth implementing this.

Is this layout shift a big deal in the first place and annoying some real users?