動畫GIF背景落後於Ipad任何工作？

我使用的方法「CSS-只有技術＃2」從下面的網站，但與GIF動畫：動畫GIF背景落後於Ipad任何工作？

的GIF相對較小（約500KB），但它使我的網站滯後向下/向上滾動時很多。包含我的文本的div實際上是加載/刷新，就像懶惰加載（我沒有使用lazyload插件）滾動時一樣快。

我的段落需要一段時間才能加載，同時背景動畫gif會凍結。

有沒有解決方法？

當動畫gif被替換爲靜態圖像時，上面的問題就消失了 - 我確定這是動畫gif導致這裏的延遲。

無論如何，似乎這個問題只適用於iPad。

它可能與GPU重繪場景有關。如果向它添加CSS3變換（如-webkit-transform：rotateX（0）;'），它有幫助嗎？ – somethinghere 2014-09-22 15:41:21

哇！非常感謝！動畫GIF不再凍結，但是即使沒有插件，div也是「延遲加載」。即使滾動起來，我也必須等待先前出現的段落再次出現（這不會發生在我的桌面上） – 2014-09-22 15:50:46

任何人都可以向我解釋如何添加CSS3轉換解決了問題？：）提前致謝。 – 2014-09-22 16:10:44

通過應用「3D」轉換爲一個元素，它的招數一個設備到使用它，而不是CPU的處理渲染這是性能更好，因爲GPU的用於處理玩遊戲等

內置GPU你可以通過觀看保羅·愛爾蘭的視頻深入瞭解這個東西來得到一個好主意。

發現here

2014-09-22 16:28:51 RustyCollins

由於盧克羅伯茨提到的（根據我原來的崗位上做出了評論），增加一個轉換爲一個元素將允許它的渲染更加平滑。不要過度使用它（與GPU交給太多，並且像CPU一樣受到瓶頸），但是偶爾使用它可以讓您直接將渲染的東西交給渲染器，而不是通過DOM渲染解析。更通過

@media (-webkit-min-device-pixel-ratio: 2)

.gif { 
    -webkit-transform: rotateX(0); 
}

你可以限制它：所以解決辦法很簡單，當然，如果你想它僅限於在iPad上使用-webkit-前綴的時候就已經限制了它頗有幾分

限制它視網膜ipad。無視網膜平板電腦無法順利運行。我認爲。

此外，您在評論中提到的段落問題可能是因爲段落不是由GPU呈現的。一定不要過度使用它，但你也可以嘗試將你的內容div放入渲染器中。如果我是正確的，每個元素都是分開遞交的，但是被視爲一個層。只要你掌握了周圍的div，就不需要太多的GPU。只是不要普遍應用它，看看它是否有幫助。

2014-09-23 10:43:16 somethinghere

回答