I've got a strange problem with chrome on jellybean running svg animations triggered from javascript.

This JSFiddle example works fine on chrome and firefox on linux, but when I run it on android with chrome I get the final step of the animation painted at the beginning of the animation.

I've tried this on both an Nexus 7 and Transformer Prime, they both have the problem. I've tested using firefox on the android devices and the problem doesn't exist. So I'm presuming that it's a defect with chrome.

However I've seen other animations using svg that do not have this problem in chrome on jellybean. Is anyone aware of a way to get around this problem, or is there something that I'm doing in my animation/js that is a possible cause of the problem?

I've now created a bug report at code.google.com, however I still need a workaround, if anyone can help me (or in case I'm doing something stupid).

I've now discovered that this is reproducible on chrome for linux (and I suspect windows). If you click on the button to start the animation before the previous animation has completed then the problem occurs. In this case the hand is drawn at the end of the 45 degree sweep before it starts the sweep.

I now suspect that I should be calling something to stop the animation before I change the animation.

Anyway, hopefully someone can resolve this problem.