WordPress admin menu display glitch in Google Chrome

Question

A recent update to Google Chrome seems to be causing issues with my WordPress admin menus.

This is happening on all sites, whether in local development or on the web. The sites are displaying fine on other browsers (Firefox and Safari).

Deactivating all plugins and changing to the default Twentyfifteen theme had no effect on this display glitch.

Is there a known issue with Chrome? Can this be fixed?

Answer 1

Edit: This issue has now been fixed in all versions of Chrome, on all platforms. Simply update your Chrome to the latest available version for your channel.

Old answer:

• Go to chrome://flags/#disable-slimming-paint
• Enable the "Disable slimming paint" option.
• Ensure that the "Enable slimming paint" option below it is not turned on.
• Relaunch Chrome.

Fixes it for me. Seems the bug is located in "Slimming Paint", part of the new Blink rendering.

Answer 2

This issue has very recently been fixed in Chrome 45.0.2454.93 so there should be no need to use this if you have the latest version of Chrome

The code below is only left in for reference.

---

You can fix this with CSS:

function chromefix_inline_css()
{ 
  wp_add_inline_style( 'wp-admin', '#adminmenu { transform: translateZ(0); }' );
}

add_action('admin_enqueue_scripts', 'chromefix_inline_css');

Add that to your theme functions.php file and it should fix the problem. There's no check for the Chrome browser specifically, but it appears this fix has no adverse effect on other browsers, so no harm done.

If you just want a plugin to do it: https://github.com/raffjones/chrome-admin-menu-fix

Answer 3

Looks like this was just pushed to the Stable release of Chrome 45. I get exactly this messed up display in version 45 of Chrome on both Mac and PC.

Answer 4

Perhaps removing Chrome Beta will solve this issue? It did the trick for me :-)