针对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视网膜上却造成了各种各样的性能问题。

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