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.

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

Fix overscroll issues locking scroll up on long pages. #10227

Merged
merged 1 commit into from Sep 30, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Sep 28, 2018

This, I think, fixes #8603.

I wasn't able to reproduce the exact issue, but I was able to reproduce a different one which I think is the same minus some browser behavior differences.

Essentially, when you don't scroll the body but instead scroll an element, once you've scrolled to the end of that element, pause, and then try to scroll further, browsers now try to scroll the parent element, in this case body. But because that isn't scrollable, some browsers apply an "overscroll bounce", others just prevent scrolling, even upwards.

Steps to reproduce:

  1. Have a page with enough content to create a scrollbar.
  2. Scroll to the very end of that content.
  3. Hold a brief pause in scrolling.
  4. Now in one motion first scroll downwards and then immediately start scrolling upwards.

Observe that you're not scrolling anywhere, or you're invoking overscroll bounces.

Step 4 is crucial — it is BECAUSE we start by scrolling downwards that the browser decides to try and scroll the body element instead of the element we mean to scroll (.edit-post-layout__content), and because the body can't be scrolled, this is causing the issue.

This PR fixes that.

This POTENTIALLY also fixes issues reported in #8383 (comment).

Fix overscroll issues locking scroll up on long pages.
This, I think, fixes #8603.

I wasn't able to reproduce the exact issue, but I was able to reproduce a different one which I think is the same minus some browser behavior differences.

Essentially, when you don't scroll the `body` but instead scroll an element, once you've scrolled to the end of that element, pause, and then try to scroll further, browsers now try to scroll the _parent_ element, in this case `body`. But because that isn't scrollable, some browsers apply an "overscroll bounce", others just prevent scrolling, even upwards.

Steps to reproduce:

1. Have a page with enough content to create a scrollbar.
2. Scroll to the very end of that content.
3. Hold a brief pause in scrolling.
4. Now in one motion first scroll downwards and then immediately start scrolling upwards.

Observe that you're not scrolling anywhere, or you're invoking overscroll bounces.

Step 4 is crucial — it is BECAUSE we start by scrolling _downwards_ that the browser decides to try and scroll the body element instead of the element we mean to scroll (`.edit-post-layout__content`), and because the body can't be scrolled, this is causing the issue.

This PR fixes that.

@jasmussen jasmussen added this to the 4.0 milestone Sep 28, 2018

@jasmussen jasmussen requested review from notnownikki and WordPress/gutenberg-core Sep 28, 2018

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Sep 29, 2018

Member

To be clear: this bug only exists in Blink/WebKit-based browsers from my testing. This bug doesn't happen at all on Firefox in MacOS because it doesn't rubber-band when scrolling past the end of content.

So to reproduce you at least need Chrome or Safari on MacOS. Maybe it happens elsewhere, but not in my testing.

Member

tofumatt commented Sep 29, 2018

To be clear: this bug only exists in Blink/WebKit-based browsers from my testing. This bug doesn't happen at all on Firefox in MacOS because it doesn't rubber-band when scrolling past the end of content.

So to reproduce you at least need Chrome or Safari on MacOS. Maybe it happens elsewhere, but not in my testing.

@notnownikki

This comment has been minimized.

Show comment
Hide comment
@notnownikki

notnownikki Sep 29, 2018

Member

I couldn't reproduce the original issue, so can't comment on this one, sorry

Member

notnownikki commented Sep 29, 2018

I couldn't reproduce the original issue, so can't comment on this one, sorry

@tofumatt

While this bug happens in both Chrome and Safari, it seems the fix only works in Chrome.

Chrome:
2018-09-29 14 17 39

Safari:
2018-09-29 14 17 21

So it's better than before, but presumably this bug exists on mobile Safari too and wouldn't be fixed if not fixed on desktop. I'm on a plane right now so can't really test on my actual phone... but I think this needs more work to fix it across browsers.

Looks like Safari doesn't support this CSS... is there something else we can use to get this working on Safari? I guess if not it makes sense to ship this for at least Chrome users.

@tofumatt

Actually, looks like Safari isn't supporting this anytime soon and it's just hacks to fix it.

Let's get this in to fix Chrome and mobile Firefox. https://caniuse.com/#feat=css-overscroll-behavior says Edge will support it out-of-the-box soon too.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 30, 2018

Contributor

Thanks for the sanity check. This is a good start, I agree.

Contributor

jasmussen commented Sep 30, 2018

Thanks for the sanity check. This is a good start, I agree.

@jasmussen jasmussen merged commit 0fe7d08 into master Sep 30, 2018

2 checks passed

codecov/project 48.63% remains the same compared to 5c2085a
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/fix-overscroll-issue branch Sep 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment