Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
cameronjonesweb opened this issue Oct 29, 2018 · 34 comments
Labels
Framework Issues related to broader framework topics, especially as it relates to javascript General Interface Parts of the UI which don't fall neatly under other labels. [Type] Bug An existing feature does not function as intended
Milestone

Comments

@cameronjonesweb
Copy link
Contributor

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
Copy link
Contributor Author

Possibly related to: #8790, #8068

@jasonbahl
Copy link

Possibly related #11127

@designsimply
Copy link
Member

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 designsimply added [Status] Needs More Info Follow-up required in order to be actionable. and removed Needs Testing Needs further testing to be confirmed. labels Nov 21, 2018
@designsimply
Copy link
Member

designsimply commented Nov 21, 2018

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
Copy link
Contributor Author

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
Copy link

spencerfinnell commented Nov 25, 2018

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
Copy link

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
Copy link

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
Copy link

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 designsimply added [Type] Bug An existing feature does not function as intended Framework Issues related to broader framework topics, especially as it relates to javascript General Interface Parts of the UI which don't fall neatly under other labels. Needs Testing Needs further testing to be confirmed. and removed [Status] Needs More Info Follow-up required in order to be actionable. labels Nov 30, 2018
@designsimply
Copy link
Member

designsimply commented Nov 30, 2018

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":

cap 2018-11-18 15-31-13-727
cap 2018-11-18 15-31-55-000

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

@mervb
Copy link

mervb commented Dec 4, 2018

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....

scroll-1

scroll-2

scroll-3

scroll-4

@miscs
Copy link

miscs commented Dec 5, 2018

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
Copy link

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

See screen recording below:

scroll-issue-wp-5 0

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
Copy link
Contributor

@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
Copy link
Contributor

Is this solved by #12644?

@youknowriad youknowriad added this to the Future: 5.x milestone Dec 28, 2018
@themightymo
Copy link

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

@synio-wesley
Copy link

Same issue here. Very annoying.

@designsimply
Copy link
Member

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
Copy link

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
Copy link
Contributor Author

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

@designsimply
Copy link
Member

designsimply commented Jan 8, 2019

@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
Copy link
Contributor

@christinablust Are you using the last ACF version?

@christinablust
Copy link

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

@youknowriad
Copy link
Contributor

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
Copy link
Contributor

Closing as this appears solved by #12644

@designsimply designsimply removed the Needs Testing Needs further testing to be confirmed. label Jan 8, 2019
@maximummax
Copy link

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.

@WordPress WordPress deleted a comment from maximummax Aug 16, 2019
@designsimply
Copy link
Member

@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
Copy link

maximummax commented Aug 17, 2019 via email

@maximummax
Copy link

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

@maximummax
Copy link

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
Copy link

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
Copy link

will keep you posted anyway

@maximummax
Copy link

ok, so here's the end of the story. the bug's been fixed with the 4.3 release of the theme.
Screen Shot 2019-08-27 at 09 18 37
thanks everybody, sorry for the spam.

@themightymo
Copy link

themightymo commented Aug 28, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Framework Issues related to broader framework topics, especially as it relates to javascript General Interface Parts of the UI which don't fall neatly under other labels. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests