Can't completely get rid of tap highlight color in Phonegap 3.0 app on Android 4.1.2

Question

I have problems completely getting rid of the dreaded highlight when tapping on an element in a Phonegap 3.0 app on Android 4.1.2.

When tapping on some elements, I first get an orange (in this case) highlight under the tapped element, but then in quick succession the parent element (or another ancestor element, not sure which) also shows a highlight!

I know that tap highlight can be "disabled" by setting a transparent color:

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
}

This actually works for most clickable elements in my app, but on some elements the parent/ancestor element still gets a highlight! I have created a demo which shows how it looks on the device I'm testing on (A Samsung Galaxy S3). Yeah, that's right. I'm using jsfiddle as an animation tool :-)

I have tried everything discussed in another thread: Disable orange outline highlight on focus.

Since the tap highlight actually disappears on all element tapped with the css rule above, I'm starting to suspect this secondary larger highlight is indicating something other than a tap. But I have tried to extend the css rule to also apply to *:hover, *:active, *:focus without success.

I have also tried to attack the problem outside of css and in the Android app itself. First setLightTouchEnabled() in WebSettings seemed promising, but A) it didn't work and B) From API level 18 it is obsolete and has no effect.

I'm really at a loss here. Any help at all would be much appreciated.

Answer 1

Here's what you require .

web kit tap color

go through the video at the end . will let you know if it is right or not . :)

and here's the git hub project

github

Answer 2

You should be able to get rid of those outlines and borders and by adding the 'outline' property to your existing css:

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
   outline: 0; 

}

Optionally, add !important to each line, since apparently phonegap juggles some default styles as well.

Answer 3

in your case try this,

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

Setting the alpha value here to zero should make it "invisible".

also some more lines are there to make it work fine,

Please refer class .link in updated fiddle

.link {
    display: block;
    padding: 5px;
    border-style:none; 
    outline-style:none; 
    -webkit-appearance: textarea;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -webkit-tap-highlight-color: transparent;
}

Other things remain same..

Also, in case of (specially iPhone) I have seen that you we return from event.

Same as preventDefault in jQuery, so in phoneGap also this may work, as it is also JS based framework.

<a class="link"
  href="javascript:void(0);"
  ontouchstart="return true;"></a>

I think this will do, please try and reply if not done..