Making WordPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#4052 closed defect (bug) (fixed)

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

Reported by: x2048's profile 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 years ago.
Illustration of the issue with scrolling

Download all attachments as: .zip

Change History (12)

@x2048
6 years ago

Illustration of the issue with scrolling

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


6 years ago

#2 @designsimply
6 years 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 years ago

#5 @designsimply
6 years 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 years 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 years ago by Joen (previous) (diff)

#7 @Otto42
6 years 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 years ago

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

#9 @Otto42
6 years ago

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

#10 @x2048
6 years 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 years ago

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

Note: See TracTickets for help on using tickets.