我正在尝试使用 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 重复但很久以前就有人问过这个问题,没有真正的结论。
这个问题有什么解决办法吗?或者任何可以稍微提高性能的东西?
最佳答案
雨的图像是视网膜吗?没有看到背景大小的标签,我认为它们不是。这意味着 webkit 必须对这些图像中的每一个进行抗锯齿处理,并且由于抗锯齿图像未被缓存,因此它必须不断地重新抗锯齿处理。尝试将图像的分辨率加倍并使用 background-size 属性。
关于ios - ipad retina 显示 webkit 动画性能差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16388533/