From 0fe7d08811cfc4c0b87e3782f42b44f33b226387 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Sun, 30 Sep 2018 12:28:27 +0200 Subject: [PATCH] Fix overscroll issues locking scroll up on long pages. (#10227) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- edit-post/components/layout/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss index 51637a17347b7..0372b46a88b7c 100644 --- a/edit-post/components/layout/style.scss +++ b/edit-post/components/layout/style.scss @@ -85,6 +85,12 @@ overflow-y: auto; -webkit-overflow-scrolling: touch; + // This rule ensures that if you've scrolled to the end of a container, + // then pause, then keep scrolling downwards, the browser doesn't try to scroll + // the parent element, usually invoking a "bounce" effect and then preventing you + // from scrolling upwards until you pause again. + overscroll-behavior-y: none; + .edit-post-visual-editor { flex-grow: 1;