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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With