-webkit translate3d與大元素口吃

Question

我使用-webkit-transform: translate3d(x,y,z)和立方beizer計時函數結合觸摸事件爲iPhone製作自定義scrollmethod類型的事物來動畫元素。

問題是，如果元素（在本例中爲頁面div）超過一定大小，則動畫口吃（元素停止半秒）。如果我的寬度爲320px，高度爲1000px，這一切都可以正常工作，但如果我將高度設置爲2000px，我會得到一個討厭的口吃。請注意，它只在一開始就結結一次，幾乎就像它正在加載，然後就沒事了。

是否有任何已知的解決方法？

Answer 1

兩種可能的解決方法。

首先關閉其他CSS屬性，即位置（頂部，左側，右側，底部）和不透明度。混合它們，特別是如果它們是動畫，可能會導致性能問題。

您可以嘗試嘗試儘可能關閉並查看問題是否已修復。如果是這樣，那麼將它們逐個重新打開，直到找到問題屬性。

其次，將您的內容包裹在iframe中。即使iframe設置爲填充視圖，但它可以在包含非常大的圖像時顯着提高性能。