Firstly, this is not a Sencha Animator specific issue, just an issue that presented itself while building out some items with Animator:
I have need to display CSS3 animated content inside an iframe. It seems that when a user switches to a different tab and back - Safari mainly, but some have reported issues in Chrome as well - that the animation returns to the start point and the transform never plays out.
Some other notes with this: this seems to only happen occasionally. Also, in some instances switching tabs multiple time will cause the transform to resume where it should have left off the first time the user blurred tab focus.
Known browser defect or something that I've overlooked? I've tried applying transform-origin and backface-visibility just for thoroughness, but these were of no help. Anyone seen this behavior and have a workaround?
I've attached a specific code sample where the case happens. You'll want to open frames.html. Nothing required; should open fine with the filepath. Other notes: OS - Windows7; mainly occurs in Safari PC. My version is 5.1.2, but its been reported in multiple versions. Everything in the code sample is webkit specific, as I was debugging I pulled other prefixes out.
I tried your example, but wasn't able to detect anything out of the ordinary.
Just to make sure we are on the same page, the animation does continue to animate when I switch tabs. And the animation does jump back to its initial position when done, so if I switch tabs for a while and go back, the animation will be at it's starting point.
Sorry for the delayed response. I checked around just to make sure that this piece did highlight the problem. The animation should actually never "reset". The animation completes when the right hand image moves out of the viewable area, then should remain static in that state with only the left image visible. Occasionally (and it is pretty intermittent) when swapping tabs (especially multiple time) the animation will reset. This should not be occurring, and does not in other, non-webkit, browsers.