Considerations for CSS3 Transition Performance

Question

As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change.

When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery animation, but not much.

I've set up two test pages to demonstrate what I mean (the difference is hardly noticeable in a regular browser):

Toggle Control on its own > http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

Combined with other elements > http://ben-major.co.uk/labs/iPhone%20UI/

I am looking for any advice on speeding up the transition in mobile devices. What could be the factors that are slowing down its performance on the full page test?

Any advice and comments welcome.

Answer 1

You have to be careful with this, as it can alter the z-index of the element it's applied to, but adding:

-webkit-transform-style: preserve-3d;

To the element you're applying the transition to, can speed animation up considerably, as it forces the hardware to use hardware acceleration for the animation.

If you do encounter layout bugs, you can just switch your 2d transitions to 3d values, so:

-webkit-transform: translate(100px, 100px)

becomes:

-webkit-transform: translate3d(100px, 100px, 0px)

You can see a demo of how this helps speed things up, at http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

If after applying this to the element, you see it or elements around it blink upon use, then use:

-webkit-backface-visibility: hidden;

To the element, and that should correct the problem.

These tips have helped me to produce fast, efficient CSS transitions, hope they help. :)