javascript - 用于 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;
}