多元素的移动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转换正在落后

回答

相关问题