search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.57k stars 4.22k forks source link

SuperGlued Meta box section. #6050

Closed bph closed 6 years ago

bph commented 6 years ago

Issue Overview

That has to do with scrolling the content box up and down, that I do quite a lot when adding embeds to the post. Sometimes I only have half the screen and the rest is covered by the meta box section which seems to stay glued to the scroll. I scroll down to the end of the content box until I see the Yoast SEO box. Then I scroll up again and whitespace seems to come up the content box with the scroll.

@jasmussen mentioned, he might know what's going on 👋🙏

Steps to Reproduce (for bugs)

  1. Add Yoast SEO plugin to your install (I haven't tested it with any other metaboxes)
  2. Create a new post
  3. Embed a few tweets
  4. scroll down to the bottom of the screen and then scroll up again.

Expected Behavior

I can scroll up and down the content box and see the full screen.

Current Behavior

Sometimes half or more of the screen is covered with a white box

Possible Solution

Screenshots / Video

supergluedmetabox

Related Issues and/or PRs

Todos

xenobytezero commented 6 years ago

I was having a similar issue in regards to the CoAuthors plugin in Gutenberg 2.5 (#5653).

It seemed to be related to the fact that the CoAuthors plugin was generating errors, and resulted in the exact same effect with the plugins metabox. When the plugins issues were resolved in Gutenberg 2.6, this issue no longer presented.

jasmussen commented 6 years ago

Great ticket, thank you for reporting. I was able to reproduce, and this seems specific to Firefox.

What happens is that Gutenberg scrolls the main editor & metabox canvas, as well as the sidebar in their own panels. This helps prevent "scroll bleed". which is for example when you scroll to the bottom of the Blocks list in the Library Inserter, and at the end you start scrolling the content beneath it.

This works fine, but for whatever reason, Firefox adds a huge white empty scrollable area below the main editor & metabox canvas. This causes the parent page to scroll. In your GIF, notice the right-most scrollbar, it shouldn't be there at all, because there's no (or shouldn't be) any content for you to scroll to there. As you can see it's all empty.

Compounding this, and what's causing the "superglue" effect, is that if you scroll using a scrol wheel, you scroll the container that you're pointing at. Which means when you scroll to the end of the main editor canvas, you stop scrolling — until you move your mouse again, at which point you scroll the parent node that shouldn't be scrolled.

I will take this one, find out what makes the giant white area below the canvas appear in Firefox, and see if I can push a fix.

jasmussen commented 6 years ago

After some debugging, turns out this is an upstream issue with the Yoast plugin, which I've ticketed with an initial patch here: https://github.com/WordPress/gutenberg/issues/6050

Thanks again for reporting!

bph commented 6 years ago

The linked ticket and patch is pointing to this very issue. As this issue is still bugging me and my work, I would like to follow-up. @jasmussen Would you happen to remember the reference ticket/PR at the Yoast repository?

jasmussen commented 6 years ago

@bph ooops how absent minded of me :D sorry about that.

This is the ticket at the WordPress repo: https://github.com/Yoast/wordpress-seo/issues/9440 — it's filed as fixed, but if you're still seeing the issue perhaps ask on their repo?

bph commented 6 years ago

Thanks, @jasmussen - Yes, I will continue work with Yoast on this.