Slow Performance on phones (collapse, toggleClass)

[notflip]

I'm experiencing very slow performance on phones for the collapsable nav, even when using toggleClass to animate something small, it starts lagging. Any ideas what might be going on?

[cvrebert]

Our animations are all CSS3-based, so all I can think of is that the animations aren't being (sufficiently) hardware-accelerated for some reason. Or maybe there's a greedy background process that's making your phone slow generally?

[carasmo]

// Animations
.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
          -webkit-transform: translateZ(0); // +++++++++++++++++++++++++++++++++ share the GPU 
}

This should smooth it out replace your mixins.less file OR just add it to the .collapsing css:

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -webkit-transition: height 0.35s ease 1s linear;
  -moz-transition: height 0.35s ease 1s linear;
  -o-transition: height 0.35s ease 1s linear;
  -ms-transition: height 0.35s ease 1s linear;
  transition: height 0.35s ease 1s linear;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

[cvrebert]

X-Ref: #10995

[mdo]

Punting discussion to #10995 since this has been brought up a few times elsewhere anyway.