Skip to main content

Bug Tracker

Side navigation

#11225 closed bug (cantfix)

Opened January 25, 2012 05:37PM UTC

Closed June 16, 2012 03:35PM UTC

Last modified June 17, 2012 04:52PM UTC

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

Reported by: saulotoledo@gmail.com Owned by:
Priority: low Milestone: None
Component: effects Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (7)

Changed February 08, 2012 12:03PM UTC by sindresorhus comment:1

Simplified testcase

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

Changed February 21, 2012 12:05PM UTC by addyosmani comment:2

component: unfiledeffects
priority: undecidedlow

Changed May 16, 2012 10:44AM UTC by sindresorhus comment:3

status: newopen

Still an issue in jQuery Edge with the animation rewrite.

Changed June 16, 2012 03:35PM UTC by mikesherov comment:4

resolution: → cantfix
status: openclosed
summary: Animation problem with negative marginsAnimations flicker in FF and IE when "opposing" attributes are simultaneously animated.

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/

Changed June 16, 2012 03:35PM UTC by mikesherov comment:5

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

Changed June 16, 2012 05:01PM UTC by anonymous comment:6

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...

Changed June 17, 2012 04:52PM UTC by mikesherov comment:7

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.