多元素的移動Safari和CSS轉換正在落後

我有一個網站，我在其中使用圖像背景執行多個DIVs的轉換，從一個CSS類到另一個CSS類（使用jQuery的addClass和removeClass）。多元素的移動Safari和CSS轉換正在落後

.class1 { 
    height: 30px; 
    width: 50px; 
    top: 30px; 
    left: 10px; 
} 

.class2 { 
    height: 50px; 
    width: 70px; 
    top: 50px; 
    left: 80px; 
} 

.fade { 
    -webkit-transition: opacity 0.6s linear, -webkit-transform 5s linear, width 5s linear, height 5s linear; 
    -moz-transition: opacity 0.6s linear, background-size 5s linear; 
    -ms-transition: opacity 0.6s linear, background-size 5s linear; 
    -o-transition: opacity 0.6s linear, background-size 5s linear; 
    transition: opacity 0.6s linear, background-size 5s linear; 
    -webkit-backface-visibility: hidden; 
}

所有DIVs被初始化（頁面加載時）與fade類。

現在，在移動Safari上動畫一個DIV時，一切正常。但是，當同時動畫多個元素時，移動Safari 滯後於。很明顯，這在Chrome等普通瀏覽器上運行得很好。

方法我試過了解決這個：

使用translate3d和scale3d CSS屬性
使用jQuery的animate
使用jQueryUI的的switchClass
使用IMG標籤，而不是DIV與背景圖像

任何幫助將非常感激，

感謝

來源

2012-08-05 Yaron Budowski

OK，我已經成功地發現什麼是導致此問題：的fade類適用於許多內部的DIV主要的DIV中，我只需要某些轉換的效果，其中不包括這個調整大小過渡（爲此，我有另一個CSS類）。

所以，在應用過渡之前，我打電話給removeClass('fade')，並且在結束過渡時，我再次添加它。

來源

2012-08-07 12:03:47

多元素的移動Safari和CSS轉換正在落後

回答

相關問題