WordPress.org

Making WordPress.org

Opened 6 months ago

Closed 6 months ago

Last modified 6 months ago

#4052 closed defect (fixed)

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

Reported by: x2048 Owned by:
Milestone: Priority: high
Component: Developer Hub Keywords:
Cc:

Description

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.

Attachments (1)

Screenshot 2019-01-08 at 19.36.46.png (243.3 KB) - added by x2048 6 months ago.
Illustration of the issue with scrolling

Download all attachments as: .zip

Change History (12)

@x2048
6 months ago

Illustration of the issue with scrolling

This ticket was mentioned in Slack in #core-editor by garrett-eclipse. View the logs.


6 months ago

#2 @designsimply
6 months ago

  • Priority changed from normal to high

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.

This ticket was mentioned in Slack in #meta by sheri. View the logs.


6 months ago

#5 @designsimply
6 months ago

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.

#6 @Joen
6 months ago

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;
	}
    .gutenberg__editor .edit-post-layout .edit-post-layout__content {
        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!

Last edited 6 months ago by Joen (previous) (diff)

#7 @Otto42
6 months ago

@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/

#8 @Joen
6 months ago

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

#9 @Otto42
6 months ago

  • Resolution set to fixed
  • Status changed from new to closed

#10 @x2048
6 months ago

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.

#11 @x2048
6 months ago

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

Note: See TracTickets for help on using tickets.