Prevent grey overlay on touchstart in mobile Safari/Webview

Question

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?

Solution 1

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!

Solution 2

My working solution is to capture and preventDefault on the touchstart event of the body of the html document. All other more explicit event handlers are unaffected. I did run into an issue with select elements, which I addressed in the body event handler (I'm using jQuery):

$('body').live(
'touchstart', 
function(e){
    if(e.target.localName != 'select'){
        e.preventDefault(); 
    }
}

)