Eliminate tap highlight in Windows Phone 7?

Question

I'm building a mobile web application, and I'm having an issue with Windows Phone 7 that I'm not having on Android or iOS. The app works fairly well in Mobile IE, but since I'm using JQuery's (relatively) new .on() method, I'm getting weird tap highlighting effects that make using the app kind of annoying.

Example: I have a list of messages, like that in a twitter or email client (in the Android/iOS style), and my JS code reads as follows:

$('#conversation_list').on('click', '.conversation', function () {
    // show all the messages in a conversation
});

What ends up happening is that the entire top-level selector (in this case, #conversation_list) gets highlighted (and usually stays highlighted for an uncomfortable second or two). I think this could confuse some users, because there isn't the sensation that you're tapping the element you want to, even though you may be.

Is there any way to avoid this, or to just turn off tap highlighting in WinPhone IE? I'm using -webkit-tap-highlight-color successfully in iOS and Android browsers, but it doesn't seem to be working here.

What about listening to each message or each element that should highlighted? — FelipeAls, Sep 30 '12 at 22:10
I was under the impression that .on() required that I listen on a parent element? Is that not the case? — Frank, Sep 30 '12 at 22:10

score 16 · Accepted Answer · answered Nov 15 '12 at 17:01

16

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

answered Nov 15 '12 at 17:01

Michael Biermann

3,105
27
23

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

See this related question:

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

There is no built-in support for removing this highlight. However, a few workarounds have been suggested.

edited May 23 '17 at 11:45

Community

1
1

answered Oct 01 '12 at 05:12

ColinE

68,894
15
164
232

score 0 · Answer 3 · answered Oct 01 '12 at 02:30

0

I think you are out of luck here. tap-highlight-color is not supported in WP7. You might be able to use IE10 pressure support, but not WP7

answered Oct 01 '12 at 02:30

albattran

1,887
1
12
16

score 0 · Answer 4 · answered May 15 '13 at 09:26

0

You can disable tap highlight in IE 10 on specific element with CSS

-ms-touch-action: none;

answered May 15 '13 at 09:26

Lepi

1

This removed the gray box but disallowed the overscroll in my case using windows phone 8 – Alen Saqe May 29 '14 at 18:42

score 0 · Answer 5 · answered Feb 12 '15 at 13:29

0

As said by Lepi use:

-ms-touch-action: none;

in the button section in your CSS file &

$(".button").click( onTouchstart );

in your JS file to fire your onTouchstart() function

answered Feb 12 '15 at 13:29

ggriff

1
1

Eliminate tap highlight in Windows Phone 7?

5 Answers5