New admin styling: Admin menu broken between 783px and 797px browser widths

[johnbillion]

This seems to be limited to Chrome on Windows. Cannot reproduce in Firefox or IE on Windows, nor in any browser on OS X. Not tested on Linux.

Steps to reproduce:

• Open up Chrome on Windows (I'm using Chrome 31 and 33 on Win7)
• Resize your browser window to between 783px and 797px
• Visit the WordPress admin area and try to use the admin menu
• Note that the admin menu flyouts don't appear and menu items aren't clickable

Resizing the window down from a wider width doesn't trigger the problem without a reload. It needs to be a fresh page load at the narrower width.

The original reporter, christer88, can reproduce the problem down to 768px width, which is weird because the narrower media query isn't kicking in. I'm unable to reproduce though.

[nacin]

"Appearance" refers to the Appearance screens (Themes, Header, Background, Customizer, etc). Yeah, it's confusing.

[christer88]

Bug produced at 770px window size in Google Chrome 32.0.1700.39 beta-m Aura, Windows 7: ​http://i.imgur.com/Uizl1zz.png

[azaozz]

Confirmed in Chrome/Win7. Happens between 783px and 799px window width. Happens because of inconsistency in calculating the window width from JS when there s a vertical scrollbar. Patch coming up.

[azaozz]

In 26743:

Responsive menu: fix calculation of the responsive trigger width from JS. It is affected by a vertical scrollbar width in some browsers. See #26458.

[azaozz]

Leaving the ticket open as this fix needs some quick testing in as many mobile devices as possible (don't forget to clear cache before testing).

[azaozz]

In 26785:

Fake a "non-responsive" window width for IE < 9 when folding/unfolding the menu (old IE doesn't support @media), fixes #26458.