Difficult To Stop Infinite CSS Animation In Android Browser

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 i

Solution 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.

Solution 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.

Solution 3:

This solves my (very similar) problem:

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