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

Posted by Ed Kirk on Stack Overflow See other posts from Stack Overflow or by Ed Kirk
Published on 2012-04-20T12:32:18Z Indexed on 2012/11/25 11:04 UTC
Read the original article Hit count: 186

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about android