Prevent grey overlay on touchstart in mobile Safari/Webview

Andrew Shooner picture Andrew Shooner · Feb 24, 2011 · Viewed 16.2k times · Source

I am building an iOS app in webkit, so my whole UI is a webview. on touchStart of any element near the outer boundary of the webview (that does not have a touchStart event bound to it), I get a translucent grey box overlay the full area of the webview. I've eliminated -webkit-tap-highlight-color or -webkit-touch-callout as causes. What do I do to remove this behavior?

Answer

Kornelius picture Kornelius · Nov 23, 2011

just put this style, you still have the default actions but without the gray overlay

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

if you want to remove the actions panel, just put this

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

And there you go! clean links at last!