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.

Solution 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

Solution 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.

Solution 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..

Solution 4

CSS side:

  * {
 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
:focus {
    outline: 0;
    border: none;
    color: rgba(255, 255, 255, 0);
}
div {
-webkit-appearance:none;
}

I've found that on the user side, going into Settings->Accessibility->Install web scripts and changing that to 'Not Allowed' stops showing a highlight around hyperlinks. (see screenshot)

Unfortunately, I have no access to phonegap so I can't reproduce your actual situation.

Solution 5

You can give this a try,

* {
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0) !important; 
   -webkit-user-modify: read-write-plaintext-only;
}

This should remove the tapping highlight color for you case.

View more solutions

Comments

[Strille]

Interesting regarding the "Install web scripts" setting. Unfortunately it's already set to the default "Not Allowed" on my device. About the css: I really can't see how setting alpha to 255 can make the highlight disappear? The alpha component should be between 0-1, where 1 is totally opaque, so setting it to 255 should be equal to setting it to 1.

[Strille]

Interesting. However, it's a solution for customizing the look of the tapped element, and it looks like it relies on being able to hide the default look by setting -webkit-tap-highlight-color to transparent, which is exactly what I'm having problems with. It also uses Zepto.js, so I need to make sure it doesn't conflict with any other plugin in my project.

[Anobik]

Try play with it :) Might get a success . I guess it will not have . try it if you have a jquery conflict the I found a SO link :) stackoverflow.com/questions/14210588/…

[Strille]

Thanks. I'm working on another project at the moment, so I don't have time to play around with this right now. I'll accept this answer because it did give me something new to try. Most of the other answers posted css already suggested in the link I posted in my question, which I had already tried.

[Anobik]

Thak you happy to help :)

[dylan-myers]

Sorry, you're right, I didn't totally proof read this. I've edited my answer to reflect this.