Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Eliminate tap highlight in Windows Phone 7?

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.

like image 979
Frank Avatar asked Sep 30 '12 22:09

Frank


2 Answers

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

like image 77
Michael Biermann Avatar answered Nov 16 '22 22:11

Michael Biermann


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.

like image 1
ColinE Avatar answered Nov 16 '22 21:11

ColinE