Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

New FireFox BorderRadius/Rotate Animation Bug?

New FireFox BorderRadius/Rotate Animation Bug?

Problem

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(degreeAnimateDegree){
        --degree; Screens.current_rotate=degree;
  };
  /* APPLY THE NEW ROTATION ANGLE TO IE>9 */
  if(!ievers=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!

Problem courtesy of: Aaron

Solution

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.
    });
});
Solution courtesy of: Miles De Feyter

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

New FireFox BorderRadius/Rotate Animation Bug?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×