Issue with Animations not resetting and/or flying off the screen about jquery-animate-enhanced HOT 18 CLOSED

jsFiddle for this bug: http://jsfiddle.net/tw6cd/2/

from jquery-animate-enhanced.

Bug (hopefully) fixed for the leaveTransforms: true element. The issue was that the -transition-property element was building up on each loop, i.e. width, -webkit-transform, width, -webkit-transform, width, -webkit-transform etc etc.

http://jsfiddle.net/tw6cd/4/

Still looking into the DOM (avoidTransforms) type div but can't yet reproduce. May well have been the same bug.

from jquery-animate-enhanced.

Run this test for an hour now and happy with the results. Closing comment and committing shortly.

from jquery-animate-enhanced.

I left it running again during an hour long meeting, and came back to find that leaveTransforms was still misbehaving - see http://i55.tinypic.com/k9z2ft.png

With regard to avoidTransforms, I do recall noticing yesterday that it seemed to react to mouse movement somehow - i.e. it already looked broken at one point, then when I moved the mouse towards/over the animated area in preparation for taking a screenshot it shot off the right hand side of the screen.

However, avoidTransforms hasn't broken at all today... yet... I'll keep running/testing it...

from jquery-animate-enhanced.

In the time it took to write the message above, the leaveTransforms animation broke further - there's definitely still some buildup going on, see http://i56.tinypic.com/2h3944m.png

from jquery-animate-enhanced.

Sorry I hadn't updated that URL properly, I was running these tests offline. I've run it in here for an hour and couldn't see any issues:

http://jsfiddle.net/tw6cd/6/

I'll have a look at the mousemove stuff, although that sounds pretty low level!

from jquery-animate-enhanced.

Aha, within seconds of running the updated test above the avoidTransforms one broke - http://i56.tinypic.com/20rtqma.png

from jquery-animate-enhanced.

And it's working its way further and further right, which suggests another buildup...

from jquery-animate-enhanced.

Hmmm. Now we're definitely seeing different results. I've tried in Safari 5 too and it's still working (with the avoidTransforms element being extra sluggish - highlighting the hardware acceleration quite nicely).

Inspecting the elements shows no sign of any build ups, and no effect from mouse movements.

Intriguing! What do you see in Safari?

from jquery-animate-enhanced.

I left it running in Chrome and (two hours later) have two findings to report:

1. The blue (avoidTransforms) test is now many thousands of pixels off to the right (no surprise)

2. The yellow (leaveTransforms) test is now out of sync by approx. 10 pixels - see http://i53.tinypic.com/2zho60n.png

The latter is surprising, and suggests an accumulated rounding error somewhere...?

Leaving them running in Firefox 3.6.12 for the same amount of time has resulted in no problems at all, the three boxes are still perfectly in sync!

This suggests that the accumulation bug might be in Chrome itself?

And I'll kick off testing in Safari and Opera now...

from jquery-animate-enhanced.

Wow, in Safari the blue (avoidTransforms) is broken straightaway, from the very first cycle.

However, unlike in Chrome it's min & max positions are the same as the other boxes, it's just that it is out of sync in timing.

(All my testing so far has been on Mac OSX btw, with the latest public/stable releases of the browsers)

from jquery-animate-enhanced.

Are you definitely viewing this URL? http://jsfiddle.net/tw6cd/6/

I'm amazed we're seeing such varying results!

from jquery-animate-enhanced.

Yes, all 4 browsers are running v6... and I'm amazed too...

Are you testing on Mac or PC, out of interest?

May I suggest two refinements to the test:

1. Each box should display whether CSS3 transforms are actually being used to perform the animation or not, as I can run the test fine in IE6 but surely CSS3 transforms are not active and it's just DOM/positioning animation?! (This may aid diagnosis)

2. Clicking the button should stop the animation (to make screenshotting easier and checking the relative positions of the boxes)

I've tried running the test in Opera 10.63 (Mac) but it's horribly broken - the middle (leaveTransforms:True) box disappears off to the right first, quickly followed by the top ((leaveTransforms:False). The middle returns from the left, so it's wrapping round, but the top box never returns. The bottom (avoidTransforms) is fine.

I'm also now running the test on Windows FF 3.6.11 and IE6 - so far both are perfectly fine.

from jquery-animate-enhanced.

I'm testing on OSX 10.6.4.

1. You can assume that you'll only be seeing CSS3 transforms on Chrome, Safari, Firefox 4 and Opera 10.5. All other tests will simply be passed back to the existing jQuery animate method.

2. Good idea but this'll take a bit of time to implement, I'll try and find time in the week.

You're right about Opera, wow. I'm guessing thats issues to do with window.getComputedStyle() but that's another branch of testing in my view!

The tests on Windows FF 3.6 and IE6 etc are useful to know but there'll hardly be any of this plugin's code getting involved.

I'm still stumped as to how you're seeing such different results to me though. I've had the v6 test running all afternoon on Chrome and Safari and it's still happily swaying back and forth!

from jquery-animate-enhanced.

Win FF + IE still fine so will stop and not consider them further.

Back on Mac I'm running OSX 10.6.5 but that shouldn't affect the browsers... should it?

FF 3.6.12 is rock solid (but as you've said there's no CSS3 in action that's not surprising)

Safari is 5.0.2 (6533.18.5) and I get the blue out-of-sync animation issue straightaway every single time... are you really not seeing that at all?

Chrome is 7.0.517.44 and only the green (top) test works reliably, the other two fail at different times, sometimes sooner, sometimes later. Run the test in Chrome, open up a blank tab or two, minimise the window, then reverse back to the test tab. Do this a few times and you should see some failure.

from jquery-animate-enhanced.

Ah, on Safari the blue will always be out of sync. You won't see this on OSX/Chrome because there's no hardware acceleration for that (yet). Safari does have hardware acceleration which is why the other 2 divs are much smoother; they're being done with CSS3. The DOM animation is much much slower as its not hardware accelerated, and is therefore the correct result.

I'll play around more with Chrome and see if I can reproduce. The OSX versions shouldn't have any impact.

from jquery-animate-enhanced.

Aha, that sync explanation does make perfect sense, and I suppose in real world usage you wouldn't have some things accelerated and others not so they'd always be in sync together...

from jquery-animate-enhanced.

Exactly. It's a selling point for hardware acceleration and CSS3 I guess!

from jquery-animate-enhanced.