2

I'm trying to remove the highlight on tap of a web page in the iPad with the css

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

This works great when using directly the browser in my iPad2. However if I move the page to a web app, with the a nice big icon, the behavior is not any longer working. Weirdo no ?

Setting

document.documentElement.style.webkitTouchCallout = "none";

as pointed in this question does not work

Some ideas, hints are welcomed

Community
  • 1
  • 1
ic3
  • 7,917
  • 14
  • 67
  • 115
  • Have you tried applying -webkit-tap-highlight-color and -webkit-touch-callout to global (*) selector? Edit: apparently, since it's pointed in the question you're referring to :) – Samuli Hakoniemi Feb 06 '12 at 08:45
  • yes for highlight, no for touch-callout. I'll try but the weird think is this is only when the page is an a web app. I'll try once I got a bit of time (we've a demo i don't want to reset the installation now). – ic3 Feb 06 '12 at 08:59
  • Sorry for the delay, didn't fix the issue – ic3 Feb 11 '12 at 12:40

1 Answers1

5

The combination of -webkit-tap-highlight-color and -webkit-user-select works for me. You can apply these to an individual element, or html.

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-select: none;
}
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239