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

硬件加速了ios的css3过渡

2 个答案: