SVG rotation always reset once finished

[gojiraaa]

Hi all,

 

I'm having this problem with SVG rotation.

Basically it always reset its position once the animation is finished.

 

Codepen:

 

During testing, it works fine on Chrome, but not of Firefox and mobile Safari.

I'm using Firefox 33.1.1.

 

Anyone's having the same issue? Any pointer is greatly appreciated.
 

Cheers!

 

 

UPDATE:

Apparently the problem is exclusive to FF for mac and Safari mac.

See the Pen QwwEYX by anon (@anon) on CodePen.

[Diaco]

Hi gojiraaa 

 

i just tested your Codepen in Firefox 33.1.1. and every thing works fine !

[gojiraaa]

Hmmmm... it's weird, I tried again and it's still problematic.

 

The circle starts on 3 o'clock and animates to 12 o'clock.

But in FF, once it's stopped at 12 o'clock, a fraction of a second later, it moves back to 3 o'clock.

[gojiraaa]

UPDATE:

 

Apparently the problem is exclusive to FF for mac and Safari mac.

[Diaco]

hmm i`m PC guy , and just i tested that in chrome 38.0.2125.111 / ie10 , 9 / Firefox 33.1.1 / android 4.4 browser and works fine .

[gojiraaa]

Thanks for helping out with the testing. Yep it works on PC, apparently it's exclusive for the mac.

However I accidentally found a trick to fix it. Instead of putting rotation 270, I put 270.01. This fixes the problem!