Improve Olivero hamburger menu animation performance

Created on 27 December 2022, over 1 year ago
Updated 17 February 2023, over 1 year ago

Problem/Motivation

The Olivero mobile nav hamburger animation is less performant than it needs to be. This is most noticeable on Safari, in my testing.

Steps to reproduce

  1. Enable the Olivero theme
  2. Open a page on a small screen or mobile browser, where the hamburger nav menu is visibile
  3. Click/touch to toggle the hamburger menu

Proposed resolution

Change the transition animation property from all to transform. The transform property is the only one animated for the hamburger menu.

πŸ“Œ Task
Status

Fixed

Version

10.0 ✨

Component
OliveroΒ  β†’

Last updated 5 days ago

Created by

πŸ‡ΊπŸ‡ΈUnited States bronzehedwick

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

    • bnjmnm β†’ committed 8c8f8b24 on 10.1.x
      Issue #3329863 by bronzehedwick, andy-blum, _utsavsharma: Improve...
  • Status changed to Fixed over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI
    • I tried several modifications of this approach just to see if I liked it better or it saved LOC or overhead. Nothing I changed was an improvement, so I'm pleased with what has been provided.
    • I ran some performance analysis tools comparing HEAD vs what is in the patch, and this is ~40% less demanding, so a really nice clear improvement. I tried a comparison replacing the use of translateY here with translate3d and there was not enough of a difference to suggest a switch would be benefifical. I ran a few profiles and if anything translate3d was a little more demanding, but even then it was by a microtrivial amount

    Tthanks @andy-blum for hopping on a Zoom to walk me through this. This seemed pretty complex but a brief explanation revealed this to be a pretty straghtforward and thoughtful fix.

    I'm going to run tests on 10.0.x just in case there are any build tool differences before backporting.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024