Glitchy scroll on mobile

[SimenB]

🐛 Bug Report

Scrolling quickly up and down with a menu open on mobile shows the underlying content at the bottom of the viewport. See reduxjs/redux#3292, but this is reproducible on Docusaurus' own website

Have you read the Contributing Guidelines on issues?

Yup

To Reproduce

(Write your steps here:)

1. Chrome 71 (on pixel 3 xl, if it matters), with Duet enabled
2. Open up a menu on e.g. https://docusaurus.io/docs/en/installation.
3. Scroll quickly up and down

Expected behavior

No glitching

Actual Behavior

See gif on linked issue.

Reproducible Demo

This project's own website reproduces for me.

(Paste the link to an example repo, including a siteConfig.js, and exact instructions to reproduce the issue.)

[fiennyangeln]

@SimenB I can reproduce the above using iPhone X / 7 (both are Chrome 71) / Firefox desktop mobile mode (since I dont have Pixel3 at hand) but using different steps. So here is what I do to reproduce the gif linked for redux.js.org

1. Click on the API word as shown below

2. Click on the menu bar on the right side

3. The empty looking site body

Do you think it is similar?

[shakcho]

@endiliey The issue has nothing do with Scroll, The Issue is actually

<nav class="onPageNav"></nav>

element has no child element in it, and also

<div class="tocToggler" id="tocToggler">
    <i class="icon-toc"></i>
</div>

is present in the DOM, and beacause of that when someone Clicks on it(#tocToggler) toggles toActive class and it applies bellow CSS

@media only screen and (max-width: 1023px){
.tocActive .onPageNav {
    background: #fff;
    bottom: 0;
    display: block;
    left: 0;
    overflow-y: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    padding: 0 20px;
    position: fixed;
    right: 0;
    top: 148px;
    z-index: 10;
 }
}

which renders the White layout on top of the main container, hence the issue is happening when there is not child element in <nav class="onPageNav">.
Screenshot attached.

1.See onNavPage has no child Element.

2. On click of the #tocToggler the toActive class gets added and above mention, style gets applied.

3. Code toggles the toActive class

I would like to solve the issue, but I want to know what will be expected behavior.

One solution I can think of is to not to render the <div class="tocToggler" id="tocToggler"> if <nav class="onPageNav"> has no child element in it .

Please let me know if my approach is correct.

[endiliey]

I think the problem is that there is a content at the bottom of the viewport

[shakcho]

The visible content is actually part of the main container and not of onPageNav, but it showing because of onPageNav has a 40px Margin in the bottom.

Need to add the margin-bottom: 0 in case of mobile view

[endiliey]

Yes. Do you want to send a PR ? 🔥🔥🔥

I think that’s what this issue is about.
And it will be nice to not display the TOC on mobile if there is no child content. Clicking something and only seeing a white layout isnt a good idea

[shakcho]

Yes, I will send a PR ASAP for both.

[endiliey]

#1489