Difficult to stop infinite CSS animation in Android browser

Question

I'm having little luck stopping or pausing an animation in Android 4.x browser / webview. I have -webkit-animation-iteration-count set to infinite and it's no problem stopping it in Chrome/Safari, but it fails in Android if the element has animated children.

My HTML:

<div id="css-container" onclick="stopAnim();">
    <div id="content">Content</div>
</div>

My JS:

function stopAnim() {
    // cssContent.classList.toggle('css-container-anim');
    cssContainer.classList.toggle('css-container-anim');
}

var cssContainer = document.getElementById("css-container");
var cssContent= document.getElementById("content");

cssContainer.classList.toggle('css-container-anim');
cssContent.classList.toggle('css-container-anim');

You can see the problem in this fiddle. If I uncomment the stopping (removal of the animation class) of the content, then I can stop the animation.

I guess it might be some bubbling issue that I fail to understand? Or is it an Android bug? I have also tried directly manipulating the style via JS instead and also setting webkitAnimationPlayState to paused instead of changing class, but that changes nothing.

Note, the fiddle works in Chrome on Android but just not the stock browser - which I need because of the webview.

Answer 1

I'm having trouble finding any sources to confirm this, but I believe the div might not be sending the onclick event for touch devices. I created a test in http://jsfiddle.net/f2XaP/4/ where I handle the onclick of an <a> and it seems to work on my iPhone.

Answer 2

I found a workaround for the problem. Removing overflow: hidden; from the container allowed the animation to stop. Go figure.

EDIT: While this works, the animation will experience stutter on start/stop so it's no ideal solution.

Answer 3

This solves my (very similar) problem:

    $el.removeClass('THE_ANIMATION').css('opacity', 0.99);
    window.setTimeout(function () {
      $el.css('opacity', 1); 
    }, 0);