CODEWITHSUNDEEP
androidcsscordovaandroid-webview
Strille
Strille

Reputation: 5781

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

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.

Upvotes: 18

Views: 10595

Answers (6)

aemonge
aemonge

Reputation: 2347

I found this in a post that might also be super interesting, since you can edit your CSS for you needs:

HTML

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

CSS

.html5logo {
 display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

http://phonegap-tips.com/demos/webkit-tap-highlight-color.html

Or if you want to be fancy: https://material.google.com/motion/choreography.html#choreography-creation

Upvotes: 0

dylan-myers
dylan-myers

Reputation: 360

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.

Upvotes: 1

Anobik
Anobik

Reputation: 4899

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

Upvotes: 4

Ashis Kumar
Ashis Kumar

Reputation: 6544

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.

Upvotes: 1

SchizoDuckie
SchizoDuckie

Reputation: 9401

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.

Upvotes: 2

MarmiK
MarmiK

Reputation: 5775

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

Upvotes: 1

Related Questions