(Browser) Screen touch seems to interfere with redrawing?

I was trying to implement a basic drag an开发者_如何学Cd drop test, and ran into a strange issue. I simplified it to the example below to narrow down the cause. Essentially, I have a timer that will flip the color of a box every second. Now when I load the page, you can see it alternating the colors of the box without an issue.

The problem is, if you touch the screen, you'll notice that the color update stops happening! My event is still getting fired because I can see it in the console log, but for some reason the actual UI does not change.

Does anyone have an idea of what is going on, and if there is a workaround? I'm seeing this on android 2.1. I originally came across this because I had touch event listeners trying to do drag and drop :)

Thanks!

window.onload=function(){

    setInterval("flipColor()", 1000);

}


function flipColor(){

    var color = document.getElementById("foo").style.backgroundColor;
    console.log("changing color, current it is "+color);
    if(color == "red")
        document.getElementById("foo").style.backgroundColor = "blue";
    else
        document.getElementById("foo").style.backgroundColor = "red";
}

in my DOM I have just this -

<div id="foo" style= "position:absolute; width:100px; height: 100px; background-color: red" ></div>