Question

I have a UIWebView in an iPhone application. In the html code there is a big image, named loadedBar that has an effect bound to it, using jQuery, the following way:

$('#loadedBar').click(function(){ ... });

Everything in the function is OK, but there’s a visualisation effect that I don’t need. When the image is clicked it becomes gray for a fraction of a second. I found the same behaviour on a div with an event, bound the same way as on the image.

Is this the default UIWebView event-click-visualisation and is there a way to turn it off (some CSS rules might do the trick), so that the app behaves like a native one.

Any ideas?

Answer 1

You are looking for:

-webkit-tap-highlight-color:<css-color>

This is an inherited property that changes the tap highlight color,
obeying the alpha value. If you don’t specify an alpha value, Safari
on iOS applies a default alpha value to the color. To disable tap
highlighting, set the alpha to 0 (invisible). If you set the alpha to
1.0 (opaque), then the element won’t be visible when tapped.

Documentation: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html

Example to disable the property:

-webkit-tap-highlight-color:rgba(0,0,0,0);