Animations flicker in Webkit and IE when "opposing" attributes are simultaneously animated.

[saulotoledo@…]

The following code works good at Firefox 9.0.1, but at Google Chrome and Internet Explorer the animation isn't smooth.

The test can be done here:  http://jsfiddle.net/3QPx8/

See this:

• At Firefox, the animation is OK;
• At Internet Explorer (tested at version 9) there are 1 pixel of move at right side;
• At Google Chrome the pixel move happens more than one time at right side.

This is the code to test (the same at link):

<div id="div" style="width: 100px; height: 50px; background-color: blue; margin-left: 100px; top: 0; right: 0"> </div>

$(document).ready(function() {

$('#div').animate({

'width': 400, 'height': 400, 'margin-left': -201,

}, {

queue: false, duration : 500

});

});

Negativate the margin-left CSS parameter is the question. Other values can show similar results.

[sindresorhus]

 Simplified testcase

The right side of the box flickers at the end of the animation on IE8.

[sindresorhus]

Still an issue in jQuery Edge with the animation rewrite.

[mikesherov]

I'm not sure there is anything we can do here.

Firefox allows for decimal values in css, and so the animation doesn't flicker because of increased granularity, and there aren't frames where just margin-left grows vs. just width growing. When only 1 grows on a frame, and then the next frame, the other grows, that'll produce a flicker.

Please open this fiddle in firefox and chrome to see:  http://jsfiddle.net/3QPx8/6/

[anonymous]

And if in this browsers we store the last larger value? Then if the actual value is bigger than that, the size is not changed.

The same for the lesser value fot inverse animations.

For example, we are resizing from 20 to 10 pixels, and the flicker happens: 20 19 18 17 16 15 16 14 13 14 12 11 10 <- See 16 and 14 causing the error

But if we store the last value, if we are going from 16 to 15, 15 is the lesser value. Trying go to 16 again doesn't work, because the lesser is 15...

[mikesherov]

It's not that a single value is fluctuating, it's that the net effects of two opposing values is fluctuating. There is no occasion where it goes "16 15 16 14", for example.