Fix overscroll issues locking scroll up on long pages. #10227
Conversation
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.
|
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. |
|
I couldn't reproduce the original issue, so can't comment on this one, sorry |
There was a problem hiding this comment.
While this bug happens in both Chrome and Safari, it seems the fix only works in Chrome.
Chrome:
Safari:
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.
There was a problem hiding this comment.
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.
|
Thanks for the sanity check. This is a good start, I agree. |
Override the `overscroll-behavior-y: none` rule introduced in WordPress/gutenberg#10227 that prevents scrolling the editor content altogether.
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
bodybut 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 casebody. But because that isn't scrollable, some browsers apply an "overscroll bounce", others just prevent scrolling, even upwards.Steps to reproduce:
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).