WordPress Admin Menu breaks in latest version of Chrome

A lot of WordPress users have complaints regarding the recent Chrome update (the latest version is 45.0.2454.85). After applying the update, there’s an issue that breaks the WordPress admin menu. If you hover the mouse cursor over menu items in the sidebar, they’ll occasionally drop out of their usual positions, causing them to overlap with the other items .

What’s causing the bug?

Several users have already reported this bug in the WordPress Bug Tracker, but they’ve discovered that the source of the issue is actually a bug in the Chrome browser itself, rather than the WordPress core. This issue thread on the Chromium site goes more in-depth with finding the root cause of the bug, and they discovered that Slimming Paint, which is enabled by default in Chrome 45, is the culprit.

Official solution

The official solution at the moment is simply disabling the Slimming Paint feature, which you can do with these easy steps::

1. In your Chrome browser, navigate to: chrome://flags/#disable-slimming-paint (just enter the text into the address bar and hit enter, just like any other site
2. You’ll see a list of technical options, with the “Disable slimming paint” option at the top; enable it
3. Disable the “Enable slimming paint” option if it’s enabled; you’ll find this option directly under the “Disable slimming paint” one
4. Relaunch Chrome

If you usually stay out of the deeper workings of your browser it may seem a little confusing at first, so here’s a screenshot of how the options should look once you’ve made the changes:

The Chrome developers are aware of the issue and are working towards a solution (chances are they’ve already found a fix, so we’ll probably see it added in chrome 46, in a few weeks), for now the official solution is to disable Slimming Paint. However, if you’re a bit more technical there’s another solution you can use until the fix is released for Chrome.

Other solutions

If you or your clients don’t want to disable the Slimming Paint feature, then you can get around the bug by adding the following code into your theme functions.php file:

add_action('admin_enqueue_scripts', 'chrome_adminmenu_fix');

function chrome_adminmenu_fix() {
	if ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Chrome' ) !== false )
		wp_add_inline_style( 'wp-admin', '#adminmenu { transform: translateZ(0); }' );
}

Alternatively, if you don’t like modifying your WordPress theme files manually then there's also a plugin that was recently added to the WordPress plugin repository which will fix the issue with the admin menu once it’s activated. It’s called Chrome Admin Menu Fix, and the plugin may be found on the WordPress repository.