Gutenberg: Can't scroll body of the page to access items at the bottom of a long admin menu

[cameronjonesweb]

Describe the bug
The body of the page doesn't scroll past the height of the Gutenberg editor (and following meta boxes). The means that if you have a number of plugins installed that add admin menu items, any menu items that are below the fold are completely inaccessible while viewing the Gutenberg editor. Having content in the editor beyond the height of the fold makes no difference.

To Reproduce
Steps to reproduce the behavior:

1. Register a number of admin menu items, enough so that the admin menu is taller than the fold of the browser window
2. Create a new post using the Gutenberg editor
3. Scroll down as far as you can

Expected behavior
The page should continue scrolling past the bottom of the Gutenberg editor content

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 69.0.3497.100

Additional context

• Gutenberg 4.1.1

[cameronjonesweb]

Possibly related to: #8790, #8068

[jasonbahl]

Possibly related #11127

[designsimply]

I tested with Chrome 70 on Windows 10 and couldn't replicate the problem. Let me also check to make sure I understand the issue. Is the problem that if you add several plugins that add admin menu items, you cannot scroll the left side menu when you go to Posts > Add New?

@cameronjonesweb any chance you could double check whether this is still happening for you with the latest plugin version? (4.5.1) I tried testing a few different ways with different browsers and couldn't get scrolling to stop working and if that's happening I'd really like to help figure it out!

[designsimply]

Re-tested with WordPress 5.0-beta5-43909 using Firefox 63.0.1 on macOS 10.13.6 and still can't replicate! Closed #12195 as a duplicate. @mervb can you spot anything I'm missing in my testing? See video: 1m17s.

[cameronjonesweb]

My experience is that it's sporadic, sometimes I'm affected but I've also noticed sometimes it's fine. I have a feeling it may be related to the size of the window. I'll do some more testing for you to see if I can still reproduce the bug.

[spencerfinnell]

There are a lot of scrolling issues still in 4.5.1. Testing using Chrome Version 70.0.3538.102 (Official Build) (64-bit) macOS 10.14

• Sometimes the post loads cut off and it's impossible to scroll all the way up to see the content or post title. The same goes for the bottom. The editor window will scroll separately but never able to reach the bottom.
• Scrolling over the admin sidebar scrolls the main window only (none of Gutenberg)
• After having clicked the sidebar or outside of the editor, the space key scrolls the main window only (none of Gutenberg).

Very randomly do multiple sidebars appear, but it's very hard to know what is causing it when all the editor content isn't accessible so it's hard to even tell where I am supposed to be on the document.

The page has a few meta boxes at the bottom and I think possibly the height difference that is cut off at the top is around the same size as what those boxes should be.

[spencerfinnell]

Removing

.edit-post-layout, .edit-post-layout__content {
    height: 100%;
}

Allows scrolling to the bottom of the editor, but makes scrolling the settings sidebar a little more difficult.

[spencerfinnell]

This should show the problem pretty clearly: https://cloudup.com/cvsKkaxN8he

When the cursor is over the editor, the editor scrolls. When the cursor is over the sidebar, the document scrolls. If those get out of sync then content becomes unreachable.

[spencerfinnell]

Is it possible to get this labeled and milestoned? A very easy to reproduce bug that makes editing very difficult.

Let me also check to make sure I understand the issue. Is the problem that if you add several plugins that add admin menu items, you cannot scroll the left side menu when you go to Posts > Add New?

@designsimply No.

1. Resize your browser window so the sidebar navigation panel is longer than the height of the window.
2. Try to scroll to the end of the demo content.
3. Move your mouse over the left sidebar navigation panel, and scroll so the rest of the menu is revealed.
4. You can now scroll the rest of the editor.

It is very obvious when scrollbars are always shown:

Sidebar menu not at the bottom so editor scrolling extends past the window: https://cloudup.com/cd1qqa8VZhN
Sidebar menu scroll to the bottom so both bars can reach the bottom: https://cloudup.com/cwjRGGFtx43

[designsimply]

Noting a past report from @MYIG in #12110 showing the problem @spencerfinnell noted where "the post loads cut off and it's impossible to scroll":

Windows 10 1803, chrome 70.0.3538.102, wordpress 4.9.8 and gutenberg 4.

[mervb]

It is still impossible to scroll in (5.0-RC3-43966)

Very easy to reproduce the error as explained by several posts. I discovered this issue immediately after using WordPress 5.0 for 5 minutes.

90% of users have a large number of menu items on the left and with the new editor the menu panel on the left has to be scrolled up and down in order to reach the bottom of the post to make edits or access additional panel information.

TO REPRODUCE THE ERROR

1. Copy a large amount of text broken into multiple paragraphs and paste into a new post.
2. Ensure you have a large number of plugins active that make the left hand menu long. Ie 10 custom post types.
3. Publish (not necessary, error still present)
4. Edit post, attempt to scroll to the end.
5. Not possible....

[miscs]

same problem here... please fix this before release. I fear a lot of disappointed Gutenberg reviews because of this... It´s really a problem with real world content (-> long articles).

[jasonbahl]

I updated to WordPress 5.0 and this is _still_ an issue.

See screen recording below:

You can see that the main content pane is not scrollable up to the top of my content. I have to move my mouse over to the menu and scroll up to be able to scroll up to the top of the content.

As a user, I expect to be able to scroll up and down on the blocks to get to the top and bottom of the contents of my blocks.

[chrisvanpatten]

@jasonbahl #12644 was opened today which may solve this, and seems like something that could land in 5.0.1. I plan to test hopefully tomorrow as I've also experienced this, but more eyes on the PR could help too :)

[youknowriad]

Is this solved by #12644?

[themightymo]

+1 I'm experiencing this issue as well (and have been for a long time).

[synio-wesley]

Same issue here. Very annoying.

[designsimply]

Everyone, if you test with the 4.8 plugin, is the problem resolved for you? See https://make.wordpress.org/test/2019/01/04/call-for-testing-gutenberg-4-8/ and if you leave a comment there noting if you've tested item 6 that would be helpful!

[christinablust]

After encountering this issue just now and finding this related ticket, I turned on the 4.8 plugin and am fairly certain the scroll behavior has been corrected. BUT activating Gutenberg 4.8 (with no other changes) made my Advanced Custom Fields metaboxes below the editor disappear entirely. Unsure if this is related to the solution to 11185, or a completely new problem.

[cameronjonesweb]

Unsure if it's directly related but https://wordpress.org/gutenberg/ now doesn't scroll at all

[designsimply]

@christinablust thanks for the note, I'll check on ACF and make a note in the comments on https://make.wordpress.org/test/2019/01/04/call-for-testing-gutenberg-4-8/

@cameronjonesweb I bet that's unrelated. Thank you for the note and I will look into it! Edit: tracking at https://meta.trac.wordpress.org/ticket/4052

[youknowriad]

@christinablust Are you using the last ACF version?

[christinablust]

@youknowriad yes, I'm in ACF Pro 5.7.9.

[youknowriad]

Interesting, Please feel free to open a separate issue if there's a way to reproduce this easily (include all the details you can). When releasing I did test with ACF and the fields were appearing properly. (I tested with the free version though)

[youknowriad]

Closing as this appears solved by #12644

[maximummax]

just can't scroll down the page when using gutenberg editor. WP 5.2.2, chrome & FF on osx. Please fix this is blocking!!!!!!!!!! Sucks.

[designsimply]

@maximummax please open a support request at https://wordpress.com/help/contact if you are using WordPress.com or at https://wordpress.org/support/forum/how-to-and-troubleshooting/ if you are using WordPress elsewhere. It sounds to me like you are using WordPress somewhere other than WordPress.com and you may have a plugin conflict. Please ask support to help you learn how to confirm whether the problem is related to a plugin—they should also be able to help file an bug report for you in the right place but some basic troubleshooting steps should be checked first. I'm sorry for the trouble you're having!

[maximummax]

Hi Sheri,

Thx for the answer. Will file a bug as advised!
This is indeed related to a self-hosted wp install.

Cheers,
Max

Le ven. 16 août 2019 à 23:46, Sheri Bigelow [e-mail] a
écrit :

@maximummax https://github.com/maximummax please open a support request
at https://wordpress.com/help/contact if you are using WordPress.com or
at https://wordpress.org/support/forum/how-to-and-troubleshooting/ if you
are using WordPress elsewhere. It sounds to me like you are using WordPress
somewhere other than WordPress.com and you may have a plugin conflict.
Please ask support to help you learn how to confirm whether the problem is
related to a plugin—they should also be able to help file an bug report for
you in the right place but some basic troubleshooting steps should be
checked first. I'm sorry for the trouble you're having!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/WordPress/gutenberg/issues/11185?email_source=notifications&email_token=ABUYYNOVY3XV6DGNDT5MSZLQE4N3RA5CNFSM4F7ZQ242YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4PY2PY#issuecomment-522161471,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUYYNKTRYSSSDOYDEVB7C3QE4N3RANCNFSM4F7ZQ24Q
.

[maximummax]

i deactivated all plugins and the bug's still there ..... hmmmm

[maximummax]

ok, i caught the culprit, it's the theme. It's called Elision from Qode. https://themeforest.net/item/elision-retina-multipurpose-wordpress-theme/6382990
i 'm gonna head to those guys to file a bug since it apparently happens on their side.

[maximummax]

if someone around here wants to check this one, just message me, I'll give you access to the site admin of the website (i mirrored it on a dev server to check the issue, so feel free to play around if you like)

[maximummax]

will keep you posted anyway

[maximummax]

ok, so here's the end of the story. the bug's been fixed with the 4.3 release of the theme.

thanks everybody, sorry for the spam.

[themightymo]

I appreciate you, @maximummax! Thanks for all your work!