新的FireFox BorderRadius /旋转动画错误？

我在插件构建期间最近升级到Firefox 14.0.1。该插件可同时动画边框半径，边框宽度，边框颜色以及各种其他属性。其他浏览器或以前版本的FireFox没有任何问题，但在更新之后，当使用旋转进行动画处理时，我注意到在边框半径动画期间出现严重的碎片/伪影。下面是我对旋转代码：新的FireFox BorderRadius /旋转动画错误？

/* 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)); 
};

与这里的功能动画圆角半径：

/* BORDER RADIUS */ 
function animate_border_radius(SetBorderRadius,AnimateBorderRadius,Speed,Effect){ 
    $ScreensLightbox.css({'border-top-left-radius':SetBorderRadius,'border-top-right-radius':SetBorderRadius,'border-bottom-left-radius':SetBorderRadius,'border-bottom-right-radius':SetBorderRadius}) 
    .animate({borderTopLeftRadius:AnimateBorderRadius, borderTopRightRadius:AnimateBorderRadius,borderBottomLeftRadius:AnimateBorderRadius,borderBottomRightRadius:AnimateBorderRadius,WebkitBorderTopLeftRadius:AnimateBorderRadius,WebkitBorderTopRightRadius:AnimateBorderRadius,WebkitBorderBottomLeftRadius:AnimateBorderRadius,WebkitBorderBottomRightRadius:AnimateBorderRadius,MozBorderRadius:AnimateBorderRadius}, 
    {duration:Speed,queue:false,specialEasing:{borderTopLeftRadius:Effect,borderTopRightRadius:Effect,borderBottomLeftRadius:Effect,borderBottomRightRadius:Effect,WebkitBorderTopLeftRadius:Effect,WebkitBorderTopRightRadius:Effect,WebkitBorderBottomLeftRadius:Effect,WebkitBorderBottomRightRadius:Effect,MozBorderRadius:Effect}}); 
    };

试图在同一时间以动画旋转和圆角半径，当遇到类似问题的人最新的Firefox？谢谢！

来源

2012-07-19 Aaron

你确定只有Firefox有这个问题吗？ – undefined 2012-07-19 20:35:18

只有Firefox的最新版本，以前的版本完美运行，并且IE9，Chrome，Safari，Opera都完美运行。 – Aaron 2012-07-19 20:36:38

忘了提及，它将工作得很好时，边界半径动画或自行旋转。只要你在同一时间对它们进行动画处理，它就会碎片化。 – Aaron 2012-07-19 20:38:22

我们看到一个非常类似的问题。我们有一些使用动画功能淡入视野的图像。在包括FF在内的所有浏览器中运行良好，直到14.0.1发布。

// 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. 
    }); 
});

来源

2012-07-25 15:37:14

我有一个类似的bug，并增加了translateZ帮助。我无法确定这会对你的情况有帮助，但值得一试：

-moz-transform: rotate(10deg) translateZ(1px);

来源

2012-08-14 14:28:51 tborychowski

新的FireFox BorderRadius /旋转动画错误？

回答

相关问题