CSS3 translate3d animations cannot be stopped when "running" ios safari

CSS3 translate3d animations cannot be stopped once they start running when running inside a WebView.

Changing property animation-play-state from running to paused does not stop the animations from running as it should be the case.

- Steps to reproduce the problem

I have created two self contained examples to demonstrate the problem.

In order to reproduce the problem create an activity consisting of a single WebView which loads the following url (target API level 17)

http://jsfiddle.net/gdementis/p2MgM/3/

Trying to press the stop link the animation does not stop at is should be.

The above works fine in Android Chrome browser or any other browser( works fine in the iPad WebView)

Also I have created a similar example where the only difference is that simple CSS3 animations are used (not translate3d ) and that seems to work fine in any case.

http://jsfiddle.net/gdementis/HykgE/2/

The expected behavior would be when property animation-play-state (-webkit-animation-play-state to be more precise)changes from running to paused for an animation that is currently running to pause.

An additional observation is that if the animations hasn't started then changed the animation-play-state to paused it does pause the animation.

Tested on ios8 Safari.