WordPress admin menu display glitch in Google Chro

问题:

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?

回答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.

回答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

回答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.

回答4:

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

回答5:

try this for chrome-only

in functions.php:

/* fix glitch on chrome for admin menus */
function chromefix_inline_css() { 
    wp_add_inline_style('wp-admin', '@media screen and (-webkit-min-device-pixel-ratio:0) { #adminmenu { transform: translateZ(0); } }');
}
add_action('admin_enqueue_scripts', 'chromefix_inline_css');

回答6:

A different variant of raffjones answer. Add this to your theme's functions.php file, and it will patch the issue. I have tested with success in Chrome 45 Mac:

// Patch for WP Admin rendering bug in Chrome 45+
function admin_menu_chrome_patch() {
    echo '<style>#adminmenu { transform: translateZ(0); }</style>';
}
add_action('admin_head', 'admin_menu_chrome_patch');