Solvedgutenberg Metaboxes overlap Gutenberg in Chrome 77

~~ Added by @nerrad ~~

An update regarding this issue:

  • This is a bug introduced by the Google Chrome browser in a recent update (v77) that surfaces in the versions of Gutenberg installed in WordPress 5.2.3 and lower (see here)
  • Chrome should be updated with the fix sometime in late October(#)(#)
  • The GB team will not be releasing a specific workaround/fix for this bug in the meantime.

For those experiencing this issue, your current options are any of the below:

  • Update to WordPress 5.3 if it is released before the Chrome bug is fixed.
  • Install and use the Gutenberg Plugin until the fix is released (keep in mind the plugin is a feature plugin so there is some variation between what you experience with the block editor bundled with WordPress core and what is in the plugin).
  • Use a different browser. For example, Firefox, or Safari.

Thanks to @nderambure for getting this on our radar and to all those participating in this ticket with feedback and reporting to the Google Chrome team!

you can read the original report below

~~ edit end ~~

Describe the bug
Since the update of Chrome to 77 (today for me), the Metaboxes goes overlapping Gutenberg like described in #11060

To reproduce
Steps to reproduce the behavior:

  1. Install a fresh Wordpres 5.2.3
  2. Create a post with some content
  3. Create a simple metabox in the twentynineteen theme, attached to 'post'.
  4. Go again in post edit, the metabox will overlap the content in the middle of viewport

Expected behavior
The metabox should remain beneath the editor

Screenshots
See screenshot in #11060 (exactly the same behaviour)

Desktop (please complete the following information):

  • MacOS 10.14.6
  • Chrome
  • 77.0.3865.75

I've tested in Firefox, Safari and Opera and it works fine.
Could you reproduce this too ?
Will try to rollback to Chrome 76, but that's not a trivial thing -_-'

39 Answers

✔️Accepted Answer

Confirmed that the CSS solution worked for us. I dropped this into our theme,

/**
 * Modify the height of a specific CSS class to fix an issue in Chrome 77 with Gutenberg.
 *
 * @see https://github.com/WordPress/gutenberg/issues/17406
 */
add_action(
	'admin_head',
	function() {
		echo '<style>.block-editor-writing-flow { height: auto; }</style>'; // phpcs:ignore
	}
);

Other Answers:

Looks like Chromium released a hotfix for this - https://chromium.googlesource.com/chromium/src/+/91d3e091aabb2bcd3eb40f9e1f00fdf33c41d729

It probably doesn't hurt to still add a fix for this to Gutenberg for anyone who's still on the older version.

I will echo myself 😄

starting today (note: yesterday) the meta boxes will break on WordPress 5.2, (and I guess 5.1 and 5.0 as well)

I'd tend to think this needs to be fixed as soon as possible, whether it's a Chrome bug or not.

As such, activating the plugin is a good workaround for now, I would suggest,

Today's September 12. At the moment, the WordPress 5.3 release is planned for November 12. I'm not sure suggesting users to keep the Gutenberg plugin activated for 2 months on their live sites is a wise advice.

While the plugin is pretty stable, it's officially listed among the Beta plugins. It's wiser to consider it beta software and personally I wouldn't recommend to run it on a live site.

Also, it appears there are some backwards compatibility concerns that need to be addressed.

In the latest releases, Chrome went through a substantial refactoring of its flexbox model implementation, which was buggy. The process went through a few additional issues and it's possible it introduced a new buggy behavior or a more strict implementation.

The issue has something to do with percentages height, as pointed out by @nitroshadow

Reference:
https://bugs.chromium.org/p/chromium/issues/detail?id=927066
https://bugs.chromium.org/p/chromium/issues/detail?id=960014

Hi all,

The chrome team is looking into this issue. Apologies for the breakages!

Is someone who is experiencing this issue able to:

  • Save a static html page (with assets) which reproduces this issue for us to analyze (if saving the page with Chrome doesn't reproduce the issue, Firefox sometimes has a better save-page functionality).
  • Switch chrome://flags#enable-layout-ng to "Disabled" and see if the issue still reproduces.

Thanks,
Ian

More Issues: