0

我正在尝试使用 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 动画性能仅在视网膜显示上受到影响的重复，但很久以前就有人问过这个问题，但没有真正的结论。

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

4

1 回答 1

0

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

于 2013-07-02T18:56:33.043 回答