Bug Tracker

Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#11225 closed bug (cantfix)

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

Reported by: saulotoledo@… 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.

Change History (7)

comment:1 Changed 8 years ago by sindresorhus

Simplified testcase

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

comment:2 Changed 8 years ago by addyosmani

Component: unfiledeffects
Priority: undecidedlow

comment:3 Changed 7 years ago by sindresorhus

Status: newopen

Still an issue in jQuery Edge with the animation rewrite.

comment:4 Changed 7 years ago by mikesherov

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/

comment:5 Changed 7 years ago by mikesherov

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.

comment:6 Changed 7 years ago by 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...

comment:7 Changed 7 years ago by 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.

Note: See TracTickets for help on using tickets.