Android browser touch events stop display being updated inc. canvas/elements - How to work around?

Question

On some android's native browser touching the page seems to stop the display from being updated until the finger is released. This occurs for both html element based animation (switching classes) and for canvas based animation. It does not however stop normal js execution and other events are fired as normal. On devices with this problem the dolphin browser also seems effected (not firefox though).

Touchstart/move both have preventDefault() fired as well as stopPropergation(), cancelBubble = true; and e.returnValue = false;. In the CSS webkit selection has also been disabled. The page will not scroll.

A similar question has been asked here: Does Android browser lock DOM on touchStart?

but I'd like to find out if this behaviour can be overcome, or at least to discover what devices will be effected by the problem, is it a device or version android issue? If you cannot answer the question running the demo and reporting your experience along with your device model and useragent (displayed at bottom of demo page) as a comment might help others or myself answer the question.

Here is a demo and steps to reproduce the behaviour. A QR code for the link can be found here https://s3-eu-west-1.amazonaws.com/canvas-test-pd/tmp.png.

https://s3-eu-west-1.amazonaws.com/canvas-test-pd/index.html

The web page has a canvas at the top and a div with a background image at the bottom. Every second the canvas is cleared and a different image displayed and the div has it's class switched (both toggle between 0 and 1 pngs). Once this has toggled a few times place your finger on the canvas (the top grey box) and hold it there. Wait to see if the animation continues (sometimes it will once or twice then stops) and if there are any visual distortions.

Update It seems that the Galaxy Tab running 3.2 requires handlers for touchstart/end of document, not just required divs for the screen to continue updating the display. Thanks jimpic.

I'm starting to believe it's an issue caused by manufacturers skins, although this is difficult to prove.

Answer 1

I can't really tell you why this is happening, but I came across a similar problem, when registering for documents touch events. When I registered for only touch move events, I had exactly the same problem you are experiencing, however when I registered for touchstart too, it suddenly worked. In your case, just add the following lines to your main.js

function touchHandlerDummy(e)
{
    e.preventDefault();
    return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
document.addEventListener("touchmove", touchHandlerDummy, false);
document.addEventListener("touchend", touchHandlerDummy, false);

Works on my Galaxy Tab. Hope this is what you were trying to do.

Answer 2

I had the very same problem. Magically enough, the problem disappeared completely when I added the following line to the <header> section:

<meta name="viewport" content="width=device-width">