Proper way to optimize CSS 3 animations for iOS/Mobile Safari?

Question

I'm building an iPad app using PhoneGap. I'm trying to use CSS transformations for the animation, but I'm not entirely sure I'm using the proper methods to leverage any hardware acceleration the device might support.

It's a modal window (DIV) that I want to slide down from the top of the page. It'd start positioned off the top of the screen, then animated into the page itself via adding a class via jquery:

.modal {
      background: url('../images/bgnd-modal.png');
      width: 800px;
      height: 568px;
      position: absolute; 
      top: -618px;
      left: 100px;
      z-index: 1001;
      -webkit-transition: top .25s ease-in; 
  }
.modal.modalOn {
      top: 80px;
  }

When deployed onto the iPad 2 with iOS 4, this works, but the animation is slightly jerky. It's not an entirely smooth animation. Should I be using different CSS to handle this? Or is this perhaps just a side-effect of it being a PhoneGap app and the DIV in question having a large background image?

Answer 1

You should at minimum add an empty translate3d declaration:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

This will help performance immensely on iOS, as demonstrated by Remy Sharp, because it causes iOS to use hardware-acceleration.

If you want to go further, refactor the animation to use a webkit translation transform, rather than animating the 'top' property. In the transform3d property, the second parameter is the Y value. In your example, change the -webkit-transition to focus on the transform property, rather than top. Then, set an initial webkit-transform of translate3d(0,0,0).

To perform your animation, change your class .modal.modalOn declaration to:

transform: translate3d(0,80px,0);
-webkit-transform: translate3d(0,80px,0)

This will cause iOS to animate the transform of the element, and should be even smoother, than the first method.

-- Note -- Don't forget to add a unit of measurement like px or em — something like transform: translate3d(0,80,0); won't work.