Wp-calypso: Scrolling is broken occasionally

[amamujee]

34829 ## Steps to reproduce

N/A happens periodically when I was blogging and looking a list of my blog posts, but a screen refresh causes it to go away.

What I expected

I expected to be able to scroll, but I can't.

Steps to reproduce

Approach 1:

1. Open the block editor: https://wordpress.com/block-editor/post/
2. Select a site to create a new post.
3. Click the back arrow in the top left to exit the editor.
4. Try to scroll the posts list, or navigate to another Calypso screen and try to scroll. Notice that it doesn't scroll.
5. Refresh the page. Notice that it scrolls now.
6. Click the Write button in the master to open the block editor again.
7. Click the back arrow in the top left to exit the editor.
8. Try to scroll the posts list. Notice that it scrolls now.

Approach 2:

1. Select one of my posts in the Reader
2. Edit the post from the Reader view
3. Update the post
4. I am unable to scroll on any page in Calypso until I refresh.

In both cases, the is-iframe class is added to the html tag and isn't removed after closing the block editor. This CSS disables scrolling when that class is present:

https://github.com/Automattic/wp-calypso/blob/39efb82641b89aec78018435e5c13fafda1b1610/client/gutenberg/editor/style.scss#L81-L83

Browser / OS version

Latest chrome running on a mac.

Screenshot / Video

[sarahfg]

I see this same issue looking at any Calypso pages were scrolling in necessary. The issue is resolved by a refresh. This happens on both the latest Chrome and Safari browsers. I run into this daily in my 1:1 concierge screenshare sessions with users.

Example pages include:
https://wordpress.com/view/
https://wordpress.com/settings/general/
https://wordpress.com/marketing/sharing-buttons/

[rachelmcr]

I consistently see this after publishing posts on a site where my workflow is to open the editor first via the editor URL. It doesn't happen after using the classic Calypso editor, or if I start elsewhere in Calypso first and _then_ open the editor.

Here are steps to repro:

1. Open the block editor: https://wordpress.com/block-editor/post/
2. Select a site to create a new post.
3. Click the back arrow in the top left to exit the editor.
4. Try to scroll the posts list, or navigate to another Calypso screen and try to scroll. Notice that it doesn't scroll.
5. Refresh the page. Notice that it scrolls now.
6. Click the Write button in the master to open the block editor again.
7. Click the back arrow in the top left to exit the editor.
8. Try to scroll the posts list. Notice that it scrolls now.

Edit to add: With these steps, the CSS class is-iframe is added to the html tag when I first open the block editor and isn't removed when I exit the editor. If I manually remove that class from the page, I can scroll again.

(Tested with Chrome 76.0.3809.100 / macOS 10.14.5.)

[katiebethbrown]

This happened to me when working on my personal site. I was editing Categories under Settings > Writing > Categories. The list of Categories scrolled fine at first but just stopped working. I didn't see any errors in the console, and refresh returned the scroll-ability.

[wpericam]

User couldn't scroll on Themes Showcase page past the third row (design > Customize > CSS). I had them refresh to fix. But they came to chat with the issue, so it's worth looking into.

13115223-hc

[wpericam]

Another user (within an hour of the one above) who couldn't scroll on the Themes page. Same situation, fixed with a refresh but they came to chat.

14858336-hc

[rachelmcr]

At least in the case I observed, this behavior seems to be related to the fix in https://github.com/Automattic/wp-calypso/pull/30530 to remove extra scrollbars in the Gutenberg iframe. cc @gwwar

[jerrysarcastic]

I had a site owner report this issue in #15031370-hc where Calypso pages would not scroll in Chrome, but worked fine in Safari. They left before I could confirm if a refresh fixed the issue, but wanted to report here to be safe.

[aleone89]

There's another report of this in hc-10093458 - in this case the user was using chrome ( http://prntscr.com/ot3a84 ) but I noticed the user had extensions running as well..

[MindyPostoff]

Another report in 2375859-zen

User explained the issue only ever appears in Chrome.

[zandyring]

I'm able to reproduce this (cannot scroll on any page) by following the steps below:

1. Select one of my posts in the Reader
2. Edit the post from the Reader view
3. Update the post
4. I am unable to scroll on any page in Calypso until I refresh.

Chrome 77.0.3865.90 and macOS 10.14.6

[rachelmcr]

I confirmed I can reproduce the issue with @zandyring's steps and the scrolling issue has the same underlying cause. The is-iframe class is added to the html tag and uses this CSS to disable scroll (even after the editor is closed):

https://github.com/Automattic/wp-calypso/blob/39efb82641b89aec78018435e5c13fafda1b1610/client/gutenberg/editor/style.scss#L81-L83

I added both sets of steps to reproduce and these details to the issue description, for easy reference.

[tanjoymor]

I run into this often on my own sites and had a user report it as well: #15818726-hc #2411510-zen followup.

[MaxPhilip]

Another report in 2408201-zen

[wpericam]

Another report after clicking back button. Refresh fixed it. 15804202-hc

[Aurorum]

Another approach to reproducing this instead of entering from the Reader is by clicking an "Edit" button directly on a blog itself (then updating the post).

[gwwar]

As folks noted the is-iframe class isn't being removed consistently. We may need to find a more robust integration implementation, depending on the reason. Related code is in https://github.com/Automattic/wp-calypso/blob/3194f7ed3a6108ec74cb8164b4b90566f7fbc5f8/apps/wpcom-block-editor/src/calypso/iframe-bridge-server.js#L538

And see prior example with hardening the trash post action: https://github.com/Automattic/wp-calypso/pull/34855

[AtrumGeost]

Got a user who reported they are not seeing the scroll bar: 2468960-zen

Confirmed it is only missing in Chrome:

Other browsers like Safari or Firefox, hide it and then display it when you want to scroll:

[khristiansnyder]

I have another user on 2498179-zen that reported scrolling broken when viewing their site on the front-end, clicking the Edit button in the bottom right toolbar, and then clicking to go back to the Pages section of Calypso.
I can replicate this on my site as well. Both cases were in Chrome:

[apeatling]

This came up on a recent test also. Adding to experience issues milestone.

[rickybanister]

To add a note that's more pressing, this bug appeared in our test while the customer was on the plans page considering a purchase, but he couldn't scroll down to see all the features. We cannot let bugs like this sit for three months.

[ktyfuller604]

Adding another report - #16848425-hc

[apeatling]

Thanks for working on this @jblz!