ipad 视网膜显示 webkit 动画性能较差答案

【问题标题】：ipad retina display webkit animation performance pooripad 视网膜显示 webkit 动画性能较差
【发布时间】：2013-07-03 02:56:33
【问题描述】：

我正在尝试使用 webkit 动画应用简单的下雨效果，在 ipad 2 上运行良好，没有问题，但在较新的视网膜显示 ipad 上运行非常缓慢：

.rain{
width:100%;height:100%;
background-image:url('rain.png'),url('rain3.png'),url('rain2.png');
-webkit-animation:rain 1.5s linear infinite}
@-webkit-keyframes rain{0%{background-position:0 0}100%{background-position:900px     1000px,400px 400px,300px 300px}
}

我已经看到提到使用 3d 变换来触发 ios 中的硬件加速，但是当将它们直接应用到此类时，动画会停止，我什至不确定这些是否会有所不同。

-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(1);
-webkit-transform: scale3d(1);

我知道这个问题可能与 iOS Webkit animation performance suffers only on retina display 重复，但这是很久以前提出的，没有真正的结论。

这个问题有什么解决办法吗？或者任何可以稍微提升性能的东西？

【问题讨论】：

标签： ios css retina-display webkit-transform webkit-animation

【解决方案1】：

雨图像是视网膜吗？没有看到，背景大小的标签，我认为它们不是。这意味着 webkit 必须对这些图像中的每一个进行抗锯齿处理，并且因为抗锯齿图像没有被缓存，所以它必须不断地重新进行抗锯齿处理。尝试将图像的分辨率加倍并使用 background-size 属性。

【讨论】：