새로운 FireFox BorderRadius/Rotate Animation 버그?

플러그인 빌드 중 최근에 Firefox 14.0.1로 업그레이드했습니다. 플러그인은 다양한 다른 속성과 함께 border-radius, border-width, border-color를 동시에 애니메이트합니다. 다른 브라우저 또는 FireFox의 이전 버전에는 아무런 문제가 없습니다. 그러나 업데이트 후에는 회전으로 애니메이션을 적용 할 때 국경 반경 애니메이션 중에 심각한 조각화/아티팩트를 감지합니다. 아래는 내가 회전에 대해 가지고있는 코드 :새로운 FireFox BorderRadius/Rotate Animation 버그?

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

같은 시간에 회전 및 국경 반경 애니메이션을 할 때 비슷한 문제를 가진 사람 최신 파이어 폭스? 감사!

출처

2012-07-19 Aaron

파이어 폭스에만이 문제가 있다고 확신합니까? – undefined

Firefox의 최신 버전 만, 이전 버전은 완벽하게 작동했으며 IE9, Chrome, Safari, Opera는 모두 완벽하게 작동합니다. – Aaron

경계 반경에 애니메이션을 적용하거나 스스로 회전 할 때 잘 작동한다는 점을 잊어 버리십시오. 동시에 양쪽 모두에 애니메이션을 적용하면 조각화됩니다. – Aaron

매우 유사한 문제가 있습니다. 우리는 애니메이션 기능으로보기가 사라지는 이미지가 있습니다. 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

비슷한 버그가 있었고 translateZ가 도움이되었습니다. 나는 이것이 귀하의 경우에 도움이 될 것이라고 말할 수는 없지만 시도해 볼만한 가치가 있습니다 :

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

출처

2012-08-14 14:28:51 tborychowski

새로운 FireFox BorderRadius/Rotate Animation 버그?

답변

관련 문제