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

Metaboxes overlap Gutenberg in Chrome 77 #17406

Closed
nderambure opened this issue Sep 11, 2019 · 34 comments

Comments

@nderambure
Copy link

commented Sep 11, 2019

~~ 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 -_-'

@nitroshadow

This comment has been minimized.

Copy link

commented Sep 11, 2019

I have the same problem, updated Google Chrome to v77 and I could not use Chrome anymore to add / edit articles. I had to take another browser.

I searched a little and found the CSS that caused the issue in Chrome, if it can help to fix the problem:

In "/wp-includes/css/dist/block-editor/style.css":

.block-editor-writing-flow { height: 100%; display: flex; flex-direction: column; }

Changing height to auto fix the issue.

I'm on Windows 10 Pro v1903

@sybrew

This comment has been minimized.

Copy link

commented Sep 11, 2019

To visualize, here you see the "Test" meta box overlap:
image

@afercia

This comment has been minimized.

Copy link
Contributor

commented Sep 11, 2019

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

@afercia

This comment has been minimized.

Copy link
Contributor

commented Sep 11, 2019

Update: this seems fixed in the current plugin (Version 6.4.0) or at least I couldn't reproduce.

As soon as I disable the plugin, I can reproduce on Chrome 77 so starting today the meta boxes will break on WordPress 5.2, (and I guess 5.1 and 5.0 as well) 🙁

@sybrew

This comment has been minimized.

Copy link

commented Sep 11, 2019

Is it safe to assume we can recommend using the Gutenberg plugin as a valid workaround? I'm not sure if it's a beta plugin, and how it works with both forward & backward compatibility with WordPress.

@jameswburke

This comment has been minimized.

Copy link

commented Sep 11, 2019

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
	}
);
@Xyfi

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2019

I can confirm @jameswburke 's workaround works! Thank you.

@hamidlatache

This comment has been minimized.

Copy link

commented Sep 12, 2019

@jameswburke wherecan I put that code , is it work ?

@tribey2

This comment has been minimized.

Copy link

commented Sep 12, 2019

@hamidlatache you can put that in your functions.php file

@paddylandau

This comment has been minimized.

Copy link

commented Sep 12, 2019

I have this problem. It happens only in Chrome version 77.
On Chrome 76, it works correctly.
On the latest versions of Firefox and Opera, it works correctly.
The problem lies specifically with Chrome 77.
Tested on Windows 10 and on Linux Ubuntu, with all plugins disabled and using the default theme Twenty Nineteen.

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2019

I will echo Andrea here:

Update: this seems fixed in the current plugin (Version 6.4.0) or at least I couldn't reproduce.

I see the issue in WordPress and Chrome 77 without the latest version of the plugin activated. The issue is not present when the plugin is activated. I also tested various breakpoints and configurations of sidebar/fullscreen and the issue is consistenly fine with the plugin activated.

As such, activating the plugin is a good workaround for now, I would suggest, and presumably this issue can be closed when WordPress 5.3 lands.

@gijo-varghese

This comment has been minimized.

Copy link

commented Sep 12, 2019

@jasmussen 5.3 ETA is on November 12. It would be great if WordPress can publish a fix on 5.2.4 immediately

@afercia

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2019

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.

@SheElf

This comment has been minimized.

Copy link

commented Sep 12, 2019

I'm experiencing the same issue. Very frustrating this has been dealt with already. It's back to Classic for now.

@hamidlatache

This comment has been minimized.

Copy link

commented Sep 12, 2019

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
	}
);

the problem has been solved, I really Thank you @jameswburke

@hamidlatache

This comment has been minimized.

Copy link

commented Sep 12, 2019

@tribey2 I thank you, I thought that I should mess with the hosting file, That worked fine for me

@bfgeek

This comment has been minimized.

Copy link

commented Sep 13, 2019

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

@gijo-varghese

This comment has been minimized.

Copy link

commented Sep 13, 2019

@bfgeek Here are the details:

Thanks

@Djennez Djennez referenced this issue Sep 13, 2019
4 of 9 tasks complete
@gijo-varghese

This comment has been minimized.

Copy link

commented Sep 13, 2019

Update from Chromium team:

Able to reproduce the issue on reported chrome version #77.0.3865.75, however issue seems to be resolved in Dev #78.0.3904.9

As per scheduled date, Chrome 78 release date is Oct 22

@nderambure

This comment has been minimized.

Copy link
Author

commented Sep 13, 2019

Thank you @gijo-varghese for the info.
It seems that as you said earlier, only a move from WordPress and the publication of a 5.2.4 would be the quicker way to address this bug (if even possible).
I can't imagine how much users are impacted by this, but I'm sure it's thousands and a vast majority with no skill in webdev at all.

@afercia

This comment has been minimized.

Copy link
Contributor

commented Sep 13, 2019

Upstream issues:
https://bugs.chromium.org/p/chromium/issues/detail?id=1003556
https://bugs.chromium.org/p/chromium/issues/detail?id=1002969

@gijo-varghese thank you for reporting upstream!

@bfgeek thank you for taking action! (maybe the two tickets should be coordinated?)

@pointmax

This comment has been minimized.

Copy link

commented Sep 14, 2019

Okay so i while this might be a chrome issue, I still think it should be fixed by the wordpress team as well. Adding height:auto is not such a big deal and who knows how many people are using the most up to date version of Chrome.

@SheElf

This comment has been minimized.

Copy link

commented Sep 14, 2019

I'm using the newest version of Chrome and this issue is significantly affecting my blog. I hear that it should be resolved in a few weeks, so I'm just going to wait it out. I'm using Classic instead of
Gutenberg.

@phpbits

This comment has been minimized.

Copy link

commented Sep 16, 2019

Added the fixes to EditorsKit plugin ( https://wordpress.org/plugins/block-options/ ). If anyone is using this plugin, just update to latest version and the Chrome issue will be fixed. Thanks @jameswburke for the CSS snippet. Works 💯

@up2pk

This comment has been minimized.

Copy link

commented Sep 17, 2019

Keep in mind that for WP 5.1 branch the proper class name is editor-writing-flow,
and not block-editor-writing-flow.

This is what I have in my functions.php

/**
 * 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
 */
if ( false !== stripos( $_SERVER['HTTP_USER_AGENT'], 'Chrome/77.' ) ) {
	add_action( 'admin_head', static function () {
		global $wp_version;

		$class = 'editor-writing-flow';

		if ( version_compare( $wp_version, '5.2', '>=' ) ) {
			$class = 'block-' . $class;
		}

		echo '<style>.' . $class . ' { height: auto; }</style>'; // phpcs:ignore
	} );
}

credits to @jameswburke of course

@arnaudbroes

This comment has been minimized.

Copy link

commented Sep 18, 2019

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.

@jg314

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2019

I can confirm this seems to be fixed in a new version of Chrome for Windows. Click the three dots in the top right of the browser, then go to Help >> About Google Chrome. From there you should get the update and be able to restart to apply it.

Once I was on version 77.0.3865.90 the issue disappeared.

@CCCullens

This comment has been minimized.

Copy link

commented Sep 18, 2019

I agree, Chrome 77.0.3865.90 fixes the issue. Update directions above.

@afercia

This comment has been minimized.

Copy link
Contributor

commented Sep 19, 2019

Same here. Upgraded Chrome from Version 77.0.3865.75 to Version 77.0.3865.90 (macOS) and can't reproduce any longer.

@paddylandau

This comment has been minimized.

Copy link

commented Sep 19, 2019

Confirmed also on Ubuntu 16.04. Version 77.0.3865.90 works correctly.

@nderambure

This comment has been minimized.

Copy link
Author

commented Sep 20, 2019

Same here, well done Chromium team ;)

@javvaru

This comment has been minimized.

Copy link

commented Oct 3, 2019

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

Hi @bfgeek ,

We are facing content overlap issues in our application only after chrome 77 update and we are using version 77.0.3865.90 (windows). Ours is a custom web application not WordPress editor. We tried the method you suggested to disable the flag and it is working for us. But I would like to know is there any other fix available other than disabling the chrome flags. Its difficult for us to tell all of our users to turn off the flag.

Any help on this would be really helpful. Thanks

@SheElf

This comment has been minimized.

Copy link

commented Oct 15, 2019

@arnaudbroes

This comment has been minimized.

Copy link

commented Oct 15, 2019

I'm having trouble changing authors on individual blog posts in Gutenberg. Where have they moved this option? thank you

That's a question suited for https://wordpress.org/support/plugin/gutenberg/, not a development repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.