用于 ios 的硬件加速 css3 转换

Posted 2023-03-14

【中文标题】用于 ios 的硬件加速 css3 转换

【英文标题】：Hardware accelerated css3 transitions for ios

【发布时间】：2011-06-16 22:17:07

【问题描述】：

我认为我的 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);
    

【问题讨论】：

你能发布更完整的代码吗？

【参考方案1】：

所以，过渡动画比您想要的更慢/更不稳定？我从类名image 猜测，问题可能只是因为它是一个图像，即使有硬件加速启动；我的工作团队有时在 ios 上进行 UI 模拟/演示时遇到了这个问题。作为测试，您可以尝试将图像替换为相同大小的div，看看它是否移动更顺畅。

【参考方案2】：

我创建了一个类，我将它添加到所有触发断断续续动画的元素中。 iPad 2 上的动画并没有断断续续，但在 iPad Retina 上却出现了各种性能问题。

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