#4052 closed defect (bug) (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:
- Go to https://wordpress.org/gutenberg/
- 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)
Change History (12)
This ticket was mentioned in Slack in #core-editor by garrett-eclipse. View the logs.
6 years ago
#2
@
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
@
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
@
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:
- Update Gutenberg theme with the a better CSS fix
- Upgrade wordpress.org/gutenberg to 5.0 if it isn't already, and deactivate the plugin.
Thanks again for the ticket!
#7
@
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/
#10
@
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.
Illustration of the issue with scrolling