CODEWITHSUNDEEP
androidhtmltouchstart
user2552016
user2552016

Reputation: 51

Android HTML5 touchstart screen delay

I'm writing an HTML5 game which updates the canvas on touchstart. On my Galaxy Note 10.1 running Android 4.1.1, the screen takes a little while to update after the touchstart event. I investigated and concluded that the screen (just any change in the screen) just takes a while to update after touchstart. Here's a demonstration:

<!DOCTYPE html>
<html>
<head>
<script>

document.addEventListener(
    'touchstart',
    function(event) {
        console.log('touchstart');

        document.getElementById('asdf').value = 'asdf';
    }
);  

</script>
</head>
<body>
<input id="asdf" value="qwer" type="text" />
</body>
</html>

Here are some of the scenarios:

  1. tap the screen, do not move your finger, do not release your finger
    • you will need to wait around half a second to see the text box updated
  2. tap the screen, move your finger, do not release your finger
    • the screen will be updated the moment you move your finger
  3. tap the screen and release
    • the screen will be updated the moment you release your finger

In all cases, the touchstart event is fired immediately, it's just the screen update gets delayed. It seems to be related to the 300ms delay that triggers the click event, but the problem is different, it is the screen update that gets delayed. I think I've tried every obvious things, like event.preventDefault or return false, setting capture to true or false. I also searched but cannot find any similar problem reported.

And it is working fine on my iPad and my Nexus One phone running Android 2.3, the screen gets updated immediately after touchstart.

Any ideas?

Upvotes: 3

Views: 932

Answers (2)

Brian Ephraim
Brian Ephraim

Reputation: 127

I boiled this bug down to viewport-meta tag. If you have this bug, yours probably looks something like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

This tag configuration prevents the user from zooming with pinch or double tap.

Try removing "maximum-scale=1, user-scalable=0". That leaves the tag like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

This should make touchstart behave properly. But now the user can zoom the page! But if you add back in "maximum-scale=1" or "user-scalable=0", it kills touchstart.

Instead of adding "maximum-scale=1", try "maximum-scale=1.01".

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">

Touchstart works as expected now, and even tho the user can zoom the page, they can only zoom it a tiny bit.

Upvotes: 1

user2552016
user2552016

Reputation: 51

After some investigation I gave up. It seems to only apply to the stock browser. The stock browser also has some very weird problems, I think I should just do not provide support for the stock browser.

Upvotes: 2

Related Questions