Skip to content
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.

Sign up for GitHub

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

Jump to bottom

www: On mobile devices, background scrolls when the sidebar is open #24255

Closed
aakashsardana opened this issue May 20, 2020 · 2 comments · Fixed by #24438
Closed

www: On mobile devices, background scrolls when the sidebar is open #24255

aakashsardana opened this issue May 20, 2020 · 2 comments · Fixed by #24438
Labels
status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer.

Comments

@aakashsardana
Copy link
Contributor

Description

On mobile devices, whenever you open the sidebar you can still scroll the background which is behind the sidebar.

Steps to reproduce

  1. Go to Gatsby website on mobile device and navigate to docs https://www.gatsbyjs.org/docs/
  2. Click on the floating button that opens the Sidebar.
  3. Now scroll the background behind the Sidebar.

Expected result

The background behind the sidebar should remain fixed.

Actual result

The background behind the sidebar is scrolling.
@aakashsardana aakashsardana added the type: bug An issue or pull request relating to a bug in Gatsby label May 20, 2020
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 20, 2020
@vladar vladar added status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. topic: website and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels May 20, 2020
@alexpyzhianov
Copy link
Contributor

Found this on the desktop as well. Looks like it can be fixed for most browsers by just adding https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior to the nav element. Shouldn't be that difficult, I'm gonna try to submit a PR today

@alexpyzhianov alexpyzhianov mentioned this issue May 25, 2020
Merged
@fk fk removed the type: bug An issue or pull request relating to a bug in Gatsby label Jun 10, 2020
@fk fk closed this as completed in #24438 Jun 10, 2020
fk pushed a commit that referenced this issue Jun 10, 2020
@alexpyzhianov
fix(www): sidebar scrolling shouldn't move main content (#24438)
ad47c24 
* Previously scrolling or swiping inside the navigation
sidebar could result in main content moving. Fixed for
most browsers with overflow-behavior: contain

Resolves #24255

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
@fk
Copy link
Contributor

fk commented Jun 10, 2020

Thank y'all! 🙏 🤗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(www) Fix scroll inside sidebar moving the content
4 participants
@fk @vladar @alexpyzhianov @aakashsardana