ios的硬件加速css3转换

Question

我不认为我的translate3d是强制硬件加速（顶部/底部定位）。我错过了什么？

.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); 
    } 

Answer 1

那么，过渡的动画比你想要的更慢/更快？我从课程名称image猜测，问题可能仅仅是它是一个图像，即使硬件加速启动;我的团队在iOS上进行UI模拟/演示时有时会遇到困难。您可以尝试一下，将其作为测试，用相同大小的div替换图像，并查看它是否更平稳地移动。

Answer 2

我创建了一个类，我添加到所有触发波涛汹涌动画的元素。 iPad 2上的动画并不起伏，但在iPad Retina上出现各种性能问题。

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