The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Laggy transform on iOS

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #208706

    Specifically referring to my little hamburger/close animation. If you don’t see the menu icon, shrink the width of the viewport.

    On my desktop (Chrome) the animation is pretty darn smooth. On my iPhone, it’s not so much. I’ve tried a few different things I’ve stumbled onto like backface-visibility: hidden, an empty transform decoration, but I haven’t seen a difference. (unless I’ve mucked something up).

    I’ve also not had the chance to check Android, so I’m not sure if this is just iOS or not.

    Any ideas? Thanks!


    Hi Beverleyh, thanks for the response!

    I followed your suggestion and read up on it a bit. I think I saw an improvement but was still seeing issues. But I also noticed a few things that made me believe some other issues with my overall structure were causing some lag/jittering. So I rewrote everything…

    As far as I can tell ,the animation is consistently smooth now. But I’m still getting a positioning issue with mobile Safari.

    On click, the top and bottom bars of the hamburger rotate and scale to make an X. This seems fine on desktop chrome, but on mobile safari, they rotate and scale toward the left side of the icon, and then jump back to center once that animation is complete.

    When open I’m centering the cross bars horizontally using left: 50% and translate3d(-50%,0,0). So at first I thought that change just wasn’t animating. But I’ve tried centering the hamburger bars with the same technique (even though they’re already centered) and I still get that same jump to the left. So I’m not sure what’s going on…

    Any ideas? Thanks agian

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.