Fighting the touchstart event delay on iOS

Question

I'm experiencing a ~500ms delay in Safari for iOS when binding the touchstart event to a KineticJS circle object. I've tried calling event.preventDefault() within the on function, thinking that this would override the default iOS behavior, but it made no difference. I'm not sure whether this has anything to do with KineticJS, which is why I left that out of the title (but included it as a tag). Note: there is no delay using the iOS simulator – the delay is only happening on the actual device (iPhone 4). Any ideas?

var stage = new Kinetic.Stage({
    container: "container",
    width: $(window).width(),
    height: $(window).height(),
});

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: "black",
});

layer.add(circle);
stage.add(layer);

circle.on("touchstart", function() {
    this.setFill("red");
    layer.draw();
});

Answer 1

There is a ~300ms delay on mobile browsers while the browser waits to see if it's a single or double tap (since double-tap is for zoom).

This can be removed on recent builds of Android devices by using:

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

However, Mobile Safari doesn't follow this same logic, and there's no way to disable this delay.

You can read more about this here: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away