Menu
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:
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?
676
asked Mar 08 '26 02:03
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.
65
answered Mar 10 '26 17:03
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.
41
answered Mar 10 '26 16:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With