Side navigation
#11351 closed bug (cantfix)
Opened February 15, 2012 02:53PM UTC
Closed May 12, 2012 07:34AM UTC
Last modified May 16, 2012 03:30AM UTC
jQuery Animate - Complete Function - Fires before animation render complete
| Reported by: | James <coursevector@gmail.com> | Owned by: | gnarf |
|---|---|---|---|
| Priority: | low | Milestone: | 1.8 |
| Component: | effects | Version: | 1.7.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
The Bug:
Running an animation calls it's complete function before the browser completes rendering the animation IF the code called during the complete is slow and the animation is fast.
When running the test below you will see the green slide left showing the blue. But because the complete is called before the animation is done and because the complete calls a slow function the animation hangs just short of the left edge. Eventually it will jump to the edge once the slow function is complete.
It is very important that you test with a slow function for the browser you are testing with. I am using Chrome 17 on a MacBook Air and using 20,000 console.log calls to simulate slow code in the complete function. In Safari 5 I need to use 60,000 log calls. In Firefox only 10,000 are needed.
Let me know if you need more details.
JSFiddle:
Screenshot of issue: (notice the green to the left side)
[[Image(http://i39.tinypic.com/29le78n.png)]]
){kind=link}
Attachments (0)
Change History (5)
Changed April 23, 2012 04:59PM UTC by comment:1
| component: | unfiled → effects |
|---|---|
| milestone: | None → 1.8 |
| owner: | → gnarf |
| priority: | undecided → low |
| status: | new → assigned |
Changed April 23, 2012 05:41PM UTC by comment:2
gnarf,
If you need additional details or help reproducing let me know.
Thanks,
James
Changed May 12, 2012 07:34AM UTC by comment:3
| resolution: | → cantfix |
|---|---|
| status: | assigned → closed |
Confirmed - I'm not comfortable "fixing" this issue. Animation callbacks need to be sync (called immediately after the last frame finishes setting properties) so that when one animation ends the next one in the queue can immediately start. It's also important that the animation callback is called after the one animation finishes but BEFORE the next one begins.
Its hopefully easy enough to workaround: "defer" your callback function as you did with the setTimeout.
Personal vote: cantfix
Changed May 14, 2012 06:15PM UTC by comment:4
Is this problem limited to the actual rendering because the browser hasn't done a repaint yet? If you query for the state, does the browser show that the values are what you expect at the end? Is the element still marked as :animated? If it's just a painting issue, I think leaving this closed is fine.
Changed May 16, 2012 03:30AM UTC by comment:5
I'm 99.9% sure its because the JS hasn't yet had a chance to let the browser actually render the "final value"
@gnarf can you confirm this?