Navbar disappears on Safari when scrolled down and then up to the top

🐛 Bug Report

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

Hello, I think this bug is introduced somewhere between canary v0.0.0-4075 and beta v2.0.0-beta.7. On Safari (v15.0 on Big Sur, and also on iOS), when I scroll down, and then scroll back to the top and pull (rubber band animation), the top nabbar no longer visible. Sorry for typing little, hope you can see the embedded screen capture below to infer.

https://user-images.githubusercontent.com/31024886/137530782-3ef241f3-9d28-4eee-aebc-ae51f981d5ea.mp4

Have you read the Contributing Guidelines on issues?

Yes

Steps to reproduce

Currently, visit https://docusaurus.io/docs using Safari.

Expected behavior

Navbar should stay when scrolled back to the top of the page.

Actual behavior

Navbar not visible.

Your environment

macOS 11.6, Safari 15.0 iOS 14.8

[Josh-Cena]

The only step necessary to trigger this behavior is to do a rubber band scrolling.

Seems Safari would treat the “scroll past top” as a negative scroll position while Chrome doesn’t. I tested myself using this:

<script>
window.onscroll = (e) => {
  console.log(window.pageYOffset);
}
</script>

When opening this HTML file (which is a blank screen) in Chrome, nothing is logged because any scrolling past the page edge will be ignored; on Safari, negative values are logged when scrolling past top, and positive ones when scrolling past bottom.

[lex111]

Thanks, I see now, PR #5721 should fix it.