#11225 closed bug (cantfix)
Animations flicker in Webkit and IE when "opposing" attributes are simultaneously animated.
Reported by: | 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 11 years ago by
comment:2 Changed 11 years ago by
Component: | unfiled → effects |
---|---|
Priority: | undecided → low |
comment:3 Changed 11 years ago by
Status: | new → open |
---|
Still an issue in jQuery Edge with the animation rewrite.
comment:4 Changed 11 years ago by
Resolution: | → cantfix |
---|---|
Status: | open → closed |
Summary: | Animation problem with negative margins → Animations 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 11 years ago by
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 11 years ago by
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 11 years ago by
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.
Simplified testcase
The right side of the box flickers at the end of the animation on IE8.