2

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?

Lea Hayes
  • 62,536
  • 16
  • 62
  • 111

2 Answers2

6

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

.puzzle canvas {
    -webkit-tap-highlight-color: transparent;
}
Lea Hayes
  • 62,536
  • 16
  • 62
  • 111
1

Maybe you need to unblur the element when the page is viewed?

$(window).focus(function() { $(':focus').blur(); });

or...

$(document).ready(function() {
    setTimeout(function() {
        $(':focus').blur();
    }, 200); // Arbitrary amount.
});

Seems like a gross solution but it might be helpful.

a paid nerd
  • 30,702
  • 30
  • 134
  • 179
  • Thanks for your help, unfortunately that doesn't appear to work. The issue occurs each time the canvas is touched. It is the same focus that is shown on hyperlinks, but I do not want it on the canvas because it looks horrible. thanks again – Lea Hayes Nov 01 '11 at 15:54