iPad canvas flickers when tapped

Question

Trying to create a PhoneGap app using the canvas tag on an iPad. The animations work fine and great but there is a blink whenever the canvas is tapped.

The same thing happens on my iPad when I go check sites with the canvas tag as well...

Does anyone know how I might prevent this?

Answer 1

This bit of CSS fixed it for me:

<style>
    * { -webkit-tap-highlight-color:rgba(0,0,0,0); }
</style>

See also -webkit-tap-highlight-color: rgba(0,0,0,0); on a div?

Answer 2

Try having your event handler consume the event and prevent it propagating to the browser.

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

In my canvas app, to keep the event from all browsers, I actually use whatever's available from event.stopPropagation(), event.stopImmediatePropagation(), event.preventDefault(), and then also have the handler return false. Can't remember which platform required which, but the linked doc suggests event.preventDefault() for Safari.