Hardware accelerated css3 transitions for ios

I don't think my translate3d is forcing hardware acceleration (of top / bottom positioning). What am I missing?

.image {
    开发者_如何学编程    background:yellow;
        -webkit-perspective: 1000;
        -webkit-backface-visibility: hidden;
        -webkit-transition-property: -webkit-transform, top, bottom;
        -webkit-transition-duration: 0.5s;
        -webkit-transform: translate3d(0,0,0);
    }

So, the animation of the transition is slower/choppier than you'd like? I'm guessing from the class name image that the problem might just be the fact that it's an image, even with hardware acceleration kicking in; my team at work has struggled with this sometimes in doing UI simulations/demos on iOS. You might try, just as a test, replacing the image with an identically-sized div and seeing if it moves more smoothly.

I created a class which I added to all elements that triggered choppy animations. The animations was not choppy on iPad 2, but was making all kinds of performance issues on the iPad Retina.

.gpu-rendered {
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}