ios - ipad retina 显示 webkit 动画性能差

Question

我正在尝试使用 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 重复但很久以前就有人问过这个问题，没有真正的结论。

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

Answer 1

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