新的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 /旋轉動畫錯誤？

回答

相關問題