18

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.

Community
  • 1
  • 1
Strille
  • 5,741
  • 2
  • 26
  • 40
  • Try go through the demo i gave in the link. It some how removes the color using e.preventDefault(). – Anobik Sep 27 '13 at 19:56

6 Answers6

4

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

Anobik
  • 4,841
  • 2
  • 17
  • 32
  • 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. – Strille Sep 30 '13 at 07:26
  • 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 :) http://stackoverflow.com/questions/14210588/is-it-possible-to-use-jquery-and-zepto-library-at-the-same-time – Anobik Sep 30 '13 at 07:33
  • 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. – Strille Sep 30 '13 at 07:40
  • Thak you happy to help :) – Anobik Sep 30 '13 at 08:46
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.

SchizoDuckie
  • 9,353
  • 6
  • 33
  • 40
1

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

MarmiK
  • 5,639
  • 6
  • 40
  • 49
  • Thanks for trying to solve this. I'm afraid I was a bit unclear to the purpose of the jsfiddle: that's not the code I'm having problems with. The **sole** purpose of that jsfiddle is to show in the "results" window what it looks like when I tap on a menu in my app. Basically ignore the html/css/javascript windows and just have a look at the results window. I thought of creating a gif-animation, but decided that creating a jsfiddle would be just as quick :-). Regarding your tips: Unfortunately none of them make any difference as far as the secondary highlight is concerned. – Strille Sep 23 '13 at 14:33
  • Since I only get this strange behaviour once the code is running inside a Phonegap app I haven't tried to create a test case reproducing the problem (potentially a lot of work). What I'm (naively) hoping for is for someone to see my question and go: "Oh, _that_ highlight. To get rid of it you need to add this thingamajig to the whatchamacallit." – Strille Sep 23 '13 at 14:41
1

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.

dylan-myers
  • 323
  • 3
  • 18
  • 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 Sep 24 '13 at 07:01
  • Sorry, you're right, I didn't totally proof read this. I've edited my answer to reflect this. – dylan-myers Oct 04 '13 at 08:59
1

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.

Ashis Kumar
  • 6,494
  • 2
  • 21
  • 36
0

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

aemonge
  • 2,289
  • 1
  • 24
  • 26