Metaboxes overlap Gutenberg in Chrome 77 #17406

nderambure · 2019-09-11T15:09:57Z

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

Install a fresh Wordpres 5.2.3
Create a post with some content
Create a simple metabox in the twentynineteen theme, attached to 'post'.
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 · 2019-09-11T17:48:39Z

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 · 2019-09-11T19:46:26Z

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

afercia · 2019-09-11T19:47:18Z

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 · 2019-09-11T19:53:02Z

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 · 2019-09-11T20:07:48Z

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 · 2019-09-11T21:53:48Z

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

abotteram · 2019-09-12T06:06:45Z

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

hamidlatache · 2019-09-12T08:13:05Z

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

tribey2 · 2019-09-12T08:14:26Z

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

paddylandau · 2019-09-12T11:09:59Z

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 · 2019-09-12T13:10:02Z

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 · 2019-09-12T13:32:15Z

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

afercia · 2019-09-12T13:40:52Z

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 · 2019-09-12T16:02:49Z

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

hamidlatache · 2019-09-12T19:13:30Z

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 · 2019-09-12T19:15:39Z

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

bfgeek · 2019-09-13T06:17:47Z

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 · 2019-09-13T06:34:13Z

@bfgeek Here are the details:

Temporary login to a wp instance: https://app-5d3d8123f911c80ef4a29afd.closte.com/wp-admin/?wtlwp_token=ba3821499f40a29deeb19243b3caa809. After logging in, edit a post https://app-5d3d8123f911c80ef4a29afd.closte.com/wp-admin/post.php?post=1&action=edit
I've tried disabling it. Issue still exists

Thanks

gijo-varghese · 2019-09-13T12:01:35Z

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 · 2019-09-13T12:21:24Z

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 · 2019-09-13T12:28:52Z

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 · 2019-09-14T14:23:19Z

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 · 2019-09-14T15:07:04Z

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 · 2019-09-16T07:38:41Z

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 · 2019-09-17T08:18:49Z

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 · 2019-09-18T19:49:23Z

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 · 2019-09-18T19:57:09Z

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 · 2019-09-18T23:53:27Z

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

afercia · 2019-09-19T06:39:49Z

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

paddylandau · 2019-09-19T11:15:43Z

Confirmed also on Ubuntu 16.04. Version 77.0.3865.90 works correctly.

nderambure · 2019-09-20T00:35:24Z

Same here, well done Chromium team ;)

javvaru · 2019-10-03T15:56:40Z

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 · 2019-10-15T11:58:44Z

I'm having trouble changing authors on individual blog posts in Gutenberg. Where have they moved this option? thank you [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&> 10/15/19, 05:56:54 AM

…

On Thu, Oct 3, 2019 at 9:56 AM Jagadeesh Avvaru ***@***.***> wrote: 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 <https://github.com/bfgeek> , We are facing content layover 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 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#17406?email_source=notifications&email_token=AED724FAGXEWT2JEGWHX6DTQMYI4RA5CNFSM4IVVJKR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAIVTFI#issuecomment-538007957>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AED724BIHUDGZC3WATIPTP3QMYI4RANCNFSM4IVVJKRQ> .

arnaudbroes · 2019-10-15T12:00:47Z

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.

kr31n3r · 2019-11-01T18:05:48Z

I'm still (or again?) facing this overlapping issue with:

MacOS: 10.13.6
Chrome: 78.0.3904.87
WordPress: 5.2.4

None of the above CSS solution worked for me but adding this snippet to my functions.php seems to fix it:

add_action(
	'admin_head',
	function() {
		echo '<style>div.edit-post-visual-editor.editor-styles-wrapper { height: unset; } </style>'; // phpcs:ignore
	}
);

SheElf · 2019-11-01T18:34:47Z

I'm not an expert, but did you update Google? There were some updates that resolved this issue. [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&> 11/01/19, 12:33:55 PM

…

On Fri, Nov 1, 2019 at 12:06 PM kr31n3r ***@***.***> wrote: I'm still (or again?) facing this overlapping issue with: MacOS: 10.13.6 Chrome: 78.0.3904.87 WordPress: 5.2.4 None of the above CSS solution worked for me but adding this snippet to my functions.php seems to fix it: add_action( 'admin_head', function() { echo '<style>div.edit-post-visual-editor.editor-styles-wrapper { height: unset; } </style>'; // phpcs:ignore }); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#17406?email_source=notifications&email_token=AED724CRSTXUJ2HZQ4UIK7DQRRVY5A5CNFSM4IVVJKR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC3W2PY#issuecomment-548891967>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AED724CQQMAMZKNWCBM56UTQRRVY5ANCNFSM4IVVJKRQ> .

Morgunov-Vitaly · 2019-11-07T08:57:56Z

hi! The same issue!
Windows: 10
Chrome: 77.0.3865.75
WordPress: 5.2.4

paddylandau · 2019-11-07T12:13:58Z

@Morgunov-Vitaly

… The same issue … Chrome: 77.0.3865.75

You must upgrade your Chrome to version 78.

youknowriad added Browser Issues Issues or PRs that are related to browser specific problems Needs Testing Needs further testing to be confirmed. [Priority] High Used to indicate top priority items that need quick attention labels Sep 11, 2019

Djennez mentioned this issue Sep 13, 2019

Yoast getting in the way of gutenberg blocks Yoast/wordpress-seo#13480

Closed

9 tasks

dbmpls mentioned this issue Sep 13, 2019

Metaboxes overlap the content of the editor #11060

Closed

phpbits mentioned this issue Sep 13, 2019

Add fixes for Gutenberg Metaboxes overlap Editor in Chrome 77 version CakeWP/block-options#120

Closed

thomasplevy mentioned this issue Sep 14, 2019

The new update of Google Chrome cause a glitch in the course edit page. gocodebox/lifterlms#927

Closed

LordSimal mentioned this issue Sep 14, 2019

IE11: the meta boxes area overlays the post #13503

Closed

michaeltorbert mentioned this issue Sep 19, 2019

Chrome 77 and Gutenberg conflict awesomemotive/all-in-one-seo-pack#2914

Closed

nderambure closed this as completed Sep 20, 2019

Djennez mentioned this issue Sep 20, 2019

Yoast metabox covers editor content Yoast/wordpress-seo#13504

Closed

4 tasks

sybrew mentioned this issue Sep 23, 2019

Page SEO Settings blocking page editor text when scrolling sybrew/the-seo-framework#473

Closed

Djennez mentioned this issue Sep 23, 2019

Can't see Backend of Wordpress with Yoast installed Yoast/wordpress-seo#13512

Closed

4 tasks

Metaboxes overlap Gutenberg in Chrome 77 #17406

Metaboxes overlap Gutenberg in Chrome 77 #17406

Comments

nderambure commented Sep 11, 2019 • edited by nerrad Loading

An update regarding this issue:

nitroshadow commented Sep 11, 2019

sybrew commented Sep 11, 2019

afercia commented Sep 11, 2019

afercia commented Sep 11, 2019

sybrew commented Sep 11, 2019

jameswburke commented Sep 11, 2019 • edited by westonruter Loading

abotteram commented Sep 12, 2019

hamidlatache commented Sep 12, 2019

tribey2 commented Sep 12, 2019

paddylandau commented Sep 12, 2019

jasmussen commented Sep 12, 2019

gijo-varghese commented Sep 12, 2019

afercia commented Sep 12, 2019

SheElf commented Sep 12, 2019

hamidlatache commented Sep 12, 2019 • edited Loading

hamidlatache commented Sep 12, 2019

bfgeek commented Sep 13, 2019

gijo-varghese commented Sep 13, 2019 • edited Loading

gijo-varghese commented Sep 13, 2019 • edited Loading

nderambure commented Sep 13, 2019

afercia commented Sep 13, 2019

pointmax commented Sep 14, 2019

SheElf commented Sep 14, 2019 • edited Loading

phpbits commented Sep 16, 2019

up2pk commented Sep 17, 2019 • edited Loading

arnaudbroes commented Sep 18, 2019 • edited Loading

jg314 commented Sep 18, 2019

CCCullens commented Sep 18, 2019

afercia commented Sep 19, 2019

paddylandau commented Sep 19, 2019

nderambure commented Sep 20, 2019

javvaru commented Oct 3, 2019 • edited Loading

SheElf commented Oct 15, 2019 via email

arnaudbroes commented Oct 15, 2019

kr31n3r commented Nov 1, 2019

SheElf commented Nov 1, 2019 via email

Morgunov-Vitaly commented Nov 7, 2019

paddylandau commented Nov 7, 2019

nderambure commented Sep 11, 2019 •

edited by nerrad

Loading

jameswburke commented Sep 11, 2019 •

edited by westonruter

Loading

hamidlatache commented Sep 12, 2019 •

edited

Loading

gijo-varghese commented Sep 13, 2019 •

edited

Loading

gijo-varghese commented Sep 13, 2019 •

edited

Loading

SheElf commented Sep 14, 2019 •

edited

Loading

up2pk commented Sep 17, 2019 •

edited

Loading

arnaudbroes commented Sep 18, 2019 •

edited

Loading

javvaru commented Oct 3, 2019 •

edited

Loading