Jquery 新的FireFox BorderRadius/Rotate动画错误?
我最近在一个插件构建过程中升级到了Firefox 14.0.1。该插件可以同时设置边框半径、边框宽度、边框颜色以及其他各种属性的动画。其他浏览器或之前版本的FireFox没有任何问题,但在更新后,我注意到在使用rotate设置动画时,在border radius动画中出现了严重的碎片/伪影。下面是我的旋转代码:Jquery 新的FireFox BorderRadius/Rotate动画错误?,jquery,firefox,rotation,css,Jquery,Firefox,Rotation,Css,我最近在一个插件构建过程中升级到了Firefox 14.0.1。该插件可以同时设置边框半径、边框宽度、边框颜色以及其他各种属性的动画。其他浏览器或之前版本的FireFox没有任何问题,但在更新后,我注意到在使用rotate设置动画时,在border radius动画中出现了严重的碎片/伪影。下面是我的旋转代码: /* ROTATE */ function animate_rotate(degree,Speed,AnimateDegree){ /* FACTOR DEGREE */if(de
/* ROTATE */
function animate_rotate(degree,Speed,AnimateDegree){
/* FACTOR DEGREE */if(degree<AnimateDegree){
++degree; Screens.current_rotate=degree;
}else if(degree>AnimateDegree){
--degree; Screens.current_rotate=degree;
};
/* APPLY THE NEW ROTATION ANGLE TO IE>9 */
if(!ievers<=8){
$ScreensLightbox.css({'-moz-transform':'translateX(0) rotate('+degree+'deg)','-moz-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%','-webkit-transform':'translateX(0) rotate('+degree+'deg)','-webkit-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%',/* Opera */'-o-transform':'translateX(0) rotate('+degree+'deg)','-o-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%',/* IE>=9 */'-ms-transform':'rotate('+degree+'deg)','-ms-transform-origin':''+Screens.LBRotateHandle[0]+'% '+Screens.LBRotateHandle[1]+'%'});
};
/* PUSH INSTANCE TIMER-ON ARRAY */
Screens.Rotate_Timer.push(setTimeout(function({animate_rotate(degree,Speed,AnimateDegree)},Speed/63));
};
在最新的Firefox中,有人在尝试同时设置旋转和边界半径动画时遇到类似问题吗?谢谢 我们看到了一个非常类似的问题。我们有一些图像通过动画功能淡入视野。在14.0.1版本之前,在包括FF在内的所有浏览器中都非常有效
// image animation
$("#imgDisplay img").each(function(index) {
var tm = 800 * index;
var imgTop = $(this).css('margin-top');
arr = imgTop.split('px');
var imgTopStart = (arr[0]*1)-50;
$(this).css({
"opacity": "0",
"margin-top": imgTopStart+"px"
}).show();
$(this).delay(tm).animate({
opacity: 1,
"margin-top": imgTop
}, 1500, function() {
// Animation complete.
});
});
我有一个类似的bug,添加translateZ也有帮助。我不能肯定这对你的情况会有帮助,但值得一试:
-moz-transform: rotate(10deg) translateZ(1px);
你确定只有firefox有这个问题吗?只有最新版本的firefox和以前的版本工作得很好,IE9、Chrome、Safari和Opera都工作得很好。忘了提一下,它在设置边框半径或旋转动画时工作得很好。一旦您同时对这两个对象设置动画,它就会断开。
-moz-transform: rotate(10deg) translateZ(1px);