iPad的Retina顯示屏WebKit的動畫表現不佳

Question

我嘗試使用WebKit的動畫應用一個簡單的雨水影響，在iPad 2運行良好，沒有問題，但在新的Retina顯示屏的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必須對這些圖像中的每一個進行反鋸齒，並且由於反鋸齒圖像沒有被緩存，所以它必須不斷地重新對抗別名。嘗試加倍你的圖像的分辨率，並使用背景大小的屬性。