Home/ Questions/Q 8296835
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T15:10:20+00:00

I’ve recently upgraded to Firefox 14.0.1 during a plugin build. The plugin animates border-radius,

  • 0

I’ve recently upgraded to Firefox 14.0.1 during a plugin build. The plugin animates border-radius, border-width, border-color along with various other properties simultaneously. There aren’t any problems with other browsers, or the previous version of FireFox, but after the update I’m noticing severe fragmenting/artifacting during border radius animation when animated with rotate. Below is the code I have for rotate:

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

and here’s the function for animating the border radius:

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

anyone having similar issues when trying to animate Rotate and Border Radius at the same time in the latest Firefox? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    We’re seeing a very similar issue. We have some images that fade into view with the animate function. Works great in all browsers including FF until the 14.0.1 release. 

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