Gutenberg: Make content scrollable again

[Copons]

Changes proposed in this Pull Request

• Override the overscroll-behavior-y: none rule introduced in Fix overscroll issues locking scroll up on long pages. WordPress/gutenberg#10227 that prevents scrolling the editor content altogether.

Testing instructions

• Open Gutenberg (http://calypso.localhost:3000/gutenberg/post/) and fill the post with enough content to create a scrollbar.
• Make sure the content is scrollable with the scrollwheel (or the trackpad gesture).
• Note if there are any unexpected behaviours, especially by comparing this with the repro steps in Fix overscroll issues locking scroll up on long pages. WordPress/gutenberg#10227.

Fixes issue reported in #28095 (comment)

[matticbot]

Test live: https://calypso.live/?branch=fix/gutenberg-scrollable-content

[vindl]

As noted before, I couldn't reproduce this issue in wpcalypso. I tested the new changes and everything still works as expected. The code looks good and since this fixes the issue for you it's good to ship.

[Copons]

I'll ship this for now as it's rather important for us to be able to scroll the content, but I'd still love @jasmussen's opinion, because I couldn't repro the original issue. 🙇

[jasmussen]

So, stepping back a bit, the reason that overscroll-behavior-y: none is to allow us to disable the overscroll bounce effect that happens notably on Mac browsers. This is when you have scrolled to the end of a container, and continue scrolling, you sort of pull at the canvas to indicate that no, you're done, you're at the end of the content here. overscroll-behavior-y: none disablees that.

Why would you do that, you might ask? Because if you are using flexbox to create layouts, you might want a container element that is not the body element to scroll. In the case of Gutenberg, this element is .edit-post-layout__content. By letting this element scroll, we gain a number of benefits:

• We can let the editor bar (top action bar) behave as if it's fixed position, without actually using position: fixed;
• We can prevent scroll bleed from other scrollable elements, like the Block Library
• We can prevent double scrollbars, in situations where the Settings sidebar needs to scroll
• We can greatly simplify much of the layout CSS

The downside to using flexbox is usually iPads. On an iPad it has enough screen real estate to view the desktop view for the editor, which uses this flexbox for layout. Which means if you swipe with your finger on the scrollable canvas, that scrolls, cool. But when you drag with the finger on the app bar, you move the body element, and invoke the scroll bounce effect, when perhaps you actually meant to scroll the content below.

Sadly overscroll-behavior-y does not work on iPads, so it doesn't fix that. But for now we are keeping the flex layout because it addresses the issue of scroll bleed. Compare:

In Calypso, when you scroll to the end of the block library, you start scrolling the content below. This issue is likely to become more prevalent once modals appear, like the keyboard shortcuts sheet.

It also fixes the issue with the double scrollbar, which is not present in the core version:

In other words, for now we are relying on the benefits of the flex layout, in order to solve the scroll bleed issue, and hoping that a future version of Safari will support the overscroll-behavior-y property. For iPhones there's a separate fix.

From what I can tell, the Calypso version of Gutenberg rejiggers this layout to not use flexbox for the editor bar. I'm not sure why, but if this behavior is to be kept, it's worth looking into other ways to solve the scroll bleed issue.

[Copons]

@jasmussen Thank you so much for the detailed explanation!
I still can't see the bounce, but now it's clear to me that the issue is about the div behind scrolling when the div in front reached its scroll end.
I'll open an issue about this and we'll try to take care of it appropriately. 🙂