99

Is there any way to disable that?
I only mean in the browser... When you click a link or a button or a div that has a click function on it, it flickers a grey box where you clicked quickly. How do i prevent this?

Fosco
  • 38,138
  • 7
  • 87
  • 101
cat
  • 1,587
  • 4
  • 15
  • 15
  • 4
    Why would you want to? It's so the user knows they actually activated something... it's very helpful. – Fosco Aug 18 '10 at 20:03
  • 3
    Basically, I have a div over top of a large image. When they double click it it zooms in. (I have disabled the zooming option for other reasons) and when you click it once, it allows a toolbar to show up or disappear. Since this div is transparent I don't want it to flicker everytime they click on it. However, I am keeping it on most of my other buttons. – cat Aug 18 '10 at 20:13

2 Answers2

237

You could set a transparent color to the -webkit-tap-highlight-color property of that element. 

a {
    -webkit-tap-highlight-color: transparent;
}
kennytm
  • 510,854
  • 105
  • 1,084
  • 1,005
  • 74
    ie: `-webkit-tap-highlight-color: rgba(0,0,0,0);` – CrazyTim Jun 21 '12 at 23:50
  • Very cool, thanks. I added it to the container div which encompasses my mobile app, but assume that you could add it to the body element like this too: body {-webkit-tap-highlight-color: rgba(0,0,0,0);} – B-Money Apr 27 '13 at 05:55
  • 13
    For the record, an app I am making in Phonegap kept having a short flicker when tapping on elements, and it was just noticeable to bug me. Setting `-webkit-tap-highlight-color:transparent` to everything (i.e. `*`) worked like a charm. – Charlie May 26 '13 at 21:37
  • 2
    Charlie - The issue you're seeing is because Webkit seems to briefly apply the highlight color to the item once it becomes inactive. Rather than setting a global rule like that, adding `-webkit-tap-highlight-color: rgba(0,0,0,0);` to the inactive state of the targeted link solves the issue. – Michael Johnston Jul 09 '13 at 01:42
  • 1
    Just want to add that using `webkit-tap-highlight-color: none` does *not* work. You actually have to set transparency via `rgba(0,0,0,0)`. – matthewpavkov Mar 20 '14 at 18:11
  • Is it possible to add it to the whole body? So you don't have to define css for each clickable element? Something like `body { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }` – user1063287 Sep 16 '18 at 11:18
10

Using mobile Safari in Phonegap, only this worked:

* {  -webkit-backface-visibility:  hidden;
     -webkit-tap-highlight-color:  transparent;
  }

Source: iPhone WebKit CSS animations cause flicker

Also, on the main panel, enable rendering:

div.myPanelOrWhatever 
  {
      -webkit-transform: translate3d(0, 0, 0)
  }

Source: Prevent flicker on webkit-transition of webkit-transform

Community
  • 1
  • 1
redolent
  • 4,159
  • 5
  • 37
  • 47