iPad Safari: How to disable the quick blinking effect when a link has been hit

ipad mobile-safari

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?

Why would you want to? It's so the user knows they actually activated something... it's very helpful.

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.

kennytm

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

a {
    -webkit-tap-highlight-color: transparent;
}

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

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);}

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

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

Community

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

Is there a Mozilla version I need to worry about?

iPad Safari: How to disable the quick blinking effect when a link has been hit

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US