WP7 + HTML5 - How to prevent a canvas from being selected/highlighted

Question

I am trying to write a simple HTML 5 app for Windows Phone 7/7.5. I have a HTML5 page with a canvas almost the size of the screen. When I click/tap on the screen, the canvas is selected. I don't want that behavior, but I still want to be able to click/tap on various controls. Is there a way to not have that behavior? Below is the link of a screenshot showing the effect.

I tried to remove that behavior using CSS in the body. Nothing has worked so far.

body {
    /* disable selections / cut copy paste actions */
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* disable callout, image save panel on long press */
    -webkit-touch-callout: none;

    /* "turn off" link highlight, good for custom pressed states */
    -webkit-tap-hightlight-color: transparent;
}

Thank you in advance for the help!

Answer 1

For WP8 they added support:

<meta name="msapplication-tap-highlight" content="no"/> 

Source: http://sgrebnov.blogspot.de/2012/10/windows-phone-8-for-html5js-developers.html

Answer 2

Martin mentioned that the following example does not exhibit the highlight behavior: http://ie.microsoft.com/testdrive/Mobile/Performance/HamsterDanceRevolution/Default.html

So I did some digging and noticed that the above example attaches events to the window object. I got it down to the following three line modifications of the file "kinetic-v3.8.4.js":

(1)
this.container.addEventListener(baseEvent, handler, false);
-->
window.addEventListener(baseEvent, handler, false);

(2)
this.container.addEventListener('mousedown', function(evt)
-->
window.addEventListener('mousedown', function(evt)

(3)
this.container.addEventListener('mousedown', function(evt)
-->
window.addEventListener('mouseup', function(evt)

After this modification, the canvas still reacts and the unwanted highlighting is gone.

Regards, Luis

Answer 3

Adding a meta tag in the headers actually fixed this issue

please add this

 <meta name="msapplication-tap-highlight" content="no"/>

Answer 4

It is not possible to turn of this gray highlight. See this related question:

Windows Phone 7 Browser - Turn off the gray shading when links are clicked

The CSS property you are setting, -webkit-tap-hightlight-color, is webkit specific, so will work on Android and iOS. Until WP7 has an equivalent, you are stuck with this!

Answer 5

Add a meta tag in you head section in you html file.

<meta name="msapplication-tap-highlight" content="no" /> 

It should work.

Regards, Pravesh