Tips for optimizing performance of -webkit-transform?

I'm using webkit-transform: translate3d and a few other properties pretty extensively on a mobile app for iPhone because its hard开发者_如何转开发ware accelerated. With about 98% of the features in place, performance is great. I'm aware of not trying to do too much at once.

I'm successfully simulating swiping in a very excellent, native way. What I've noticed now is that when I add the last 2% of features I'm seeing some image redrawing issues in the that is being animated while swiping. After you swipe through all 4 images and they load, then performance is perfectly smooth again. However, when this section is hidden and shown, the same thing happens.

What I hypothesize is happening is there's an internal buffer being hit and it has to reload each time.

So this with that background, the general question is what kinds of performance optimizations have other developers been making for -webkit-transform? I'm not necessarily asking about my particular situation, but rather what wider range of optimizations have people figured out for their individual needs?

Hopefully if this question gets some answers, it can be a resource for other folks asking the same question down the road.

It's a fairly well known thing, but making sure the element you transform is using 3d transforms where possible helps a lot on devices that hardware acccelerate transforms (iOS at the moment).

The easiest way to do that is to add:

transform: translate3d(0,0,0);

with the appropriate prefixes to the css of the element in question, then just animate it as normal, either by using 2d or 3d transforms.

It might sound a bit weird but i had a similar issue and i solved it by using -webkit-perspective: 1000.

Don't know how this acts in favor of the transitions, but in my case it did.