Question

Whenever canvas is touched (and held) it is highlighted in a darker colour. When touch is released it returns back to normal. It is not like a text selection, it is the same highlight that the iPhone uses on hyperlinks.

I am using jQuery to bind events:

$('canvas').bind('mousedown touchstart', function(e) {
    var c = $(this), offset = c.offset();
    var touch = {
        x: (e.targetTouches ? e.targetTouches[0].pageX : e.pageX) - offset.left,
        y: (e.targetTouches ? e.targetTouches[0].pageY : e.pageY) - offset.top
    };

    testApp.lastTouch = touch;

    return false;
});

Problem occurs worse when app has been saved to “Home Screen”. It does happen in web browser when edge of canvas is touched, but on home screen app it does it regardless of where canvas is touched.

What might be the cause of this problem?

Answer 1

I eventually found that the problem can be solved with the following CSS:

.puzzle canvas {
    -webkit-tap-highlight-color: transparent;
}