Gutenberg: Metaboxes overlap Gutenberg in Chrome 77

[nderambure]

~~ 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 https://github.com/WordPress/gutenberg/issues/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 https://github.com/WordPress/gutenberg/issues/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]

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]

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

[afercia]

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]

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]

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]

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]

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

[hamidlatache]

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

[tribey2]

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

[paddylandau]

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]

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]

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

[afercia]

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]

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

[hamidlatache]

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]

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

[bfgeek]

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]

@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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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

[afercia]

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

[paddylandau]

Confirmed also on Ubuntu 16.04. Version 77.0.3865.90 works correctly.

[nderambure]

Same here, well done Chromium team ;)

[javvaru]

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]

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 [e-mail]
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
https://github.com/WordPress/gutenberg/issues/17406?email_source=notifications&email_token=AED724FAGXEWT2JEGWHX6DTQMYI4RA5CNFSM4IVVJKR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAIVTFI#issuecomment-538007957,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AED724BIHUDGZC3WATIPTP3QMYI4RANCNFSM4IVVJKRQ
.

[arnaudbroes]

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]

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]

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 [e-mail] 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 ''; // phpcs:ignore });

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/WordPress/gutenberg/issues/17406?email_source=notifications&email_token=AED724CRSTXUJ2HZQ4UIK7DQRRVY5A5CNFSM4IVVJKR2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC3W2PY#issuecomment-548891967,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AED724CQQMAMZKNWCBM56UTQRRVY5ANCNFSM4IVVJKRQ
.

[Morgunov-Vitaly]

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

[paddylandau]

@Morgunov-Vitaly

… The same issue … Chrome: 77.0.3865.75

You must upgrade your Chrome to version 78.