MP6: admin menu transition causes considerable lag

[johnbillion]

In the <782px media query, the admin menu gets a transition effect applied to it so it eases in and out when using the hamburger button. This causes considerable lag when opening and closing the menu and really makes using the menu an unpleasant experience.

Tested on Android Chrome on a Nexus 4. I'd imagine it's even worse on less powerful devices.

I vote that we scrap the transition effect.

[iammattthomas]

I'd like to retain some transition here to make it clear where the sidebar is coming from when it's opened. Shortening the animation to .05s makes it "feel" much faster, though there's still a ~1s delay before the menu begins to open (with or without animation). tollmanz has some ideas for increasing performance on the responsive menu in general; we'll reconsider removing this animation altogether if it's still necessary then.

[iammattthomas]

In 26179:

Reduce responsive menu transition animation from .2s to .05s to reduce lag. See #25969.

[johnbillion]

The animation seems much better now, but yeah there's still a delay after pressing the button before anything happens.

[azaozz]

Testing on iPad1 (iOS 5.1.1) the toolbar disappears when going from landscape to portrait and doesn't return when going back. Works ok on iPad2 (iOS 7.0.2).

On both iPads there is couple of seconds delay when tapping the hamburger button (feels very slow compared to everything else).

Also on both iPads switching from landscape to portrait triggers some broken looking animation. The menu folds, then pops out, then fades out, at the same time "Updates" icon on the toolbar "grows" in size but all the rest have already "snapped" to the bigger size. The same thing repeats when loading another admin screen in portrait.

Switching back to landscape, the menu goes through 2-3 steps again, first pops out with the bigger fonts, then "shrinks". At the same time the toolbar expands to fill the width and the only animated icon there is still "Updates".

This works quite better on a smart phone (Android 4.2) as the menu is always hidden. The only thing remaining is when loading another admin screen, the menu pops out initially (with smaller fonts) for about 2-3 seconds and then slides to the left.

Also, the delay seems bigger on screens that have more images like the Library. Seems the "whole page" sideways sliding animation is causing it.

[iammattthomas]

The sidebar needs to be set to display: none by default for small screens, and display: block when the .wp-responsive-open class is set. This eliminates the flash of the standard sidebar when switching between portrait and layout on a tablet, or when resizing a desktop browser window. It also eliminates the flash of the sidebar on Windows Phone 8 devices. Because we're now setting the display property, the transition has no effect, so it can be removed. This eliminates quite a bit of the jankiness on mobile devices and speeds up the performance of the sidebar.

[iammattthomas]

In 26414:

Eliminate the transition animation on the responsive sidebar; set the responsive sidebar to display: none by default so it doesn't appear momentarily when loading the page. Fixes #25969.