Docusaurus: Website layout jumping when navigating between docs pages

[sarneeh]

🐛 Bug Report

The default CSS (I guess this is the reason) is making navigating between documentation sections pretty annoying, because the whole layout jumps around (example in "Actual behavior").

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

Just roam around the sections in the official docusaurus docs page. This also happens after initial project bootstrap.

Expected behavior

I'd expect the default initial setup to be slick. For example, this does not happen in the Prettier docs.

Actual Behavior

Reproducible Demo

• docusaurus docs
• draft docs

[JoelMarcey]

@sarneeh - I actually don't see that behavior on https://docusaurus.io. May I ask what OS and browser you are using?

Also, no, this is not server-side. Everything is pre-built and served as static html.

[sarneeh]

@JoelMarcey Yeah I've already noticed that this is just static html - my bad! :)

I'm working on Ubuntu 18.04 + Chrome 72.0.3626.109.

[sarneeh]

I tested it on Firefox and this issue does not occur there. It might be something wrong with my Chrome on Linux :cry:

[JoelMarcey]

Do you have the latest Chrome version? I want to indeed make sure this is not a Docusaurus issue, but it does sound like it may be your browser specifically.

[sarneeh]

@JoelMarcey Yes, this is the latest version. I've also tried on incognito mode (without any plugins) and I have the same issue. What's interesting (or depressing :smile:) is that I didn't see this kind of behavior on any other site before :smile:

[JoelMarcey]

Do you see the problem on other Docusaurus sites? https://docusaurus.io/en/users

Prettier uses Docusaurus, I want to know if you see the problem in other places?

[sarneeh]

@JoelMarcey Yes, but I see this is completely non-deterministic. It sometimes happens, sometimes not. As you may already guess - it's this kind of a bug that I have no idea where could I look at to find the cause :cry:

[jamsch]

May be the transition property on input#search_input_react that's causing that jump on Ubuntu Chrome.

[yangshun]

From the screenshots, this is probably due to the expanding/collapsing feature after the page loads. It doesn't happen with Prettier docs because they didn't opt into expanding/collapsing categories.

Docusaurus 1 initially renders the page with collapsing of all the categories, only after the page loads will we find which page is currently active and expand the category containing that page. One potential fix is to move the expansion/collapsing into the React component so that when we prerender during build we get the final UI, without any need for expanding/collapsing on page load. Docusaurus 2 does this.

[yangshun]

We probably won't ever address this due to how v1 pages are rendered. Please use v2 if this issue is bugging you!