2

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.

huulbaek
  • 31
  • 4

3 Answers3

0

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.

Lenny Sirivong
  • 1,001
  • 8
  • 19
  • Yes, it also works on my iPhone (and my Chrome in Android) but unfortunately it fails on my Android stock browser. – huulbaek Oct 24 '12 at 21:29
  • I found some info on DOM event support: http://www.quirksmode.org/mobile/tableTouch.html maybe `mouseup` will be handled, how does this look for you: http://jsfiddle.net/f2XaP/6/ – Lenny Sirivong Oct 24 '12 at 21:34
  • Sadly, same story. Although I have also stopping the animation in a timed JS function (not depending on click events) and it still fails. The dirty terrible solution is to quickly stop all animated children so I can stop the parent - but I will cry if I have to do that :) – huulbaek Oct 24 '12 at 21:42
  • You're not doing anything more than toggling a class... it's a pretty basic thing that should be handled. Which version of android browser are you using? – Lenny Sirivong Oct 24 '12 at 21:56
  • I agree, it should be simple - it's 4.1.1. – huulbaek Oct 25 '12 at 06:15
0

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.

huulbaek
  • 31
  • 4
0

This solves my (very similar) problem:

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