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:
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 comment:1
Changed February 21, 2012 12:05PM UTC by comment:2
| component: | unfiled → effects |
|---|---|
| priority: | undecided → low |
Changed May 16, 2012 10:44AM UTC by comment:3
| status: | new → open |
|---|
Still an issue in jQuery Edge with the animation rewrite.
Changed June 16, 2012 03:35PM UTC by comment:4
| 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/
Changed June 16, 2012 03:35PM UTC by 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 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 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.
Simplified testcase
The right side of the box flickers at the end of the animation on IE8.