Scrolling on https://wordpress.org/gutenberg/ is broken

[x2048]

To reproduce:

1. Go to ​https://wordpress.org/gutenberg/
2. Attempt to scroll down.

Result: Scrolling down the page doesn't work.

Environment: Chrome, Mac OS.

The issue is with this file: ​https://wordpress.org/gutenberg/wp-content/themes/pub/gutenberg/style.css?ver=11

The problem seems to be with this part of the CSS:

@media (min-width: 782px) {
	.folded .gutenberg__editor .edit-post-header,
	.folded .gutenberg__editor .components-notice-list {
	    left: 0;
	}

	.gutenberg__editor .edit-post-layout .edit-post-layout__content {
		margin-top: 32px;
		overflow-y: inherit;
	}

When the "overflow-y: inherit;" statement is removed, scrolling works once more.

Note the size of the scrollbar in the attached file - it's much smaller than it should be.

[x2048]

Illustration of the issue with scrolling

[designsimply]

Tested and confirmed I cannot scroll ​https://wordpress.org/gutenberg/ using Chrome 70.0.3538.110, Firefox 63.0.3, and Safari 12.0.2 on macOS 10.13.6.

I tried to replicate the problem on a separate install—I tested with WordPress 5.0.3-RC1-44445 running Twenty Nineteen theme and scrolling works normally in the editor there. Also checked with Jetpack 6.8.1 (default settings) and could still scroll. I used plain paragraph blocks in my test.

[designsimply]

Related: ​https://github.com/WordPress/gutenberg/pull/12644

[designsimply]

A temporary fix has been applied to ​https://wordpress.org/gutenberg/ (props joen) and more details will be posted later due to the late hour in some timezones.

[Joen]

Hi, thank you for this ticket! What an embarrassing bug, apologies, I believe it was a casualty of ​https://github.com/WordPress/gutenberg/pull/12644, as Sheri noted. As she also noted, I deployed a temporary fix for this, using custom CSS:

`
/* This is a temporary fix to allow scrolling with the latest plugin changes. Should be fixed in the Gutenberg theme */
@media only screen and ( min-width: 782px ) {

html {

margin-top: 0 !important;

}

.gutenbergeditor .edit-post-layout .edit-post-layoutcontent {

margin-top: 0;
overflow-y: scroll;

}

}
`

However it's temporary because a) this should be fixed in the Gutenberg theme (I'll try to take a look at this), and b) ​https://wordpress.org/gutenberg is currently using the Gutenberg plugin. Now that the editor is in WordPress, that site should probably simply run WordPress 5.0, and not the plugin. Especially because the plugin might add new features as part of ongoing feature work, that the site is not yet geared for. So two action items remain:

1. Update Gutenberg theme with the a better CSS fix
2. Upgrade wordpress.org/gutenberg to 5.0 if it isn't already, and deactivate the plugin.

Thanks again for the ticket!

[Otto42]

@Joen It is running 5, and deactivating the plugin instantly breaks the site.

Call to undefined function gutenberg_editor_scripts_and_styles() in .../themes/pub/gutenberg/functions.php on line 168

Theme is here if you want to patch it: https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/gutenberg/

[Joen]

Ack, gotcha, I will try and look into that as well. Thanks for looking.

[x2048]

Thank you for fixing it. I can confirm that the site now scrolls.

I would note, though, that the scrollbar is not visible on my machine. It's usable, but probably suboptimal.
Upon further inspection, this can be fixed by removing "position: fixed" on the same element that had the unusual overflow behavior.

@media (min-width: 782px) {
.edit-post-layout__content {
    bottom: 0;
    height: auto;
    left: 0;
    margin-left: 160px;
    min-height: calc(100% - 88px);
    /* position: fixed; */ // remove this one
    right: 0; // Probably those, too
    top: 88px;
}
}

After I removed that line, the overflow-y line didn't even need to be changed anymore.
I don't know why that element was fixed, so I don't know what un-fixing it would break. Seems fine, though. Maybe some padding needs to be removed from elements at the top of the page to keep the page looking the same as before.

[x2048]

Pinging @Joen because I think the fix should be different.