Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#25969 closed defect (bug) (fixed)

MP6: admin menu transition causes considerable lag

Reported by: johnbillion Owned by: iammattthomas
Milestone: 3.8 Priority: lowest
Severity: minor Version: 3.8
Component: Administration Keywords: needs-ui has-patch
Focuses: ui Cc:


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.

Attachments (1)

25969.diff (992 bytes) - added by johnbillion 7 years ago.

Download all attachments as: .zip

Change History (11)

7 years ago

#1 @johnbillion
7 years ago

  • Keywords has-patch added

#2 @SergeyBiryukov
7 years ago

  • Component changed from Graphic Design to Administration
  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8

#3 @iammattthomas
7 years ago

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.

#4 @iammattthomas
7 years ago

In 26179:

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

#5 @johnbillion
7 years ago

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

#6 @iammattthomas
7 years ago

  • Cc mt@… added

#7 @azaozz
7 years ago

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.

Last edited 7 years ago by azaozz (previous) (diff)

#8 @matt
7 years ago

  • Priority changed from normal to lowest
  • Severity changed from normal to minor

#9 @iammattthomas
7 years ago

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.

#10 @iammattthomas
7 years ago

  • Owner set to iammattthomas
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.