Fabric.js canvas flickering in iPad and iPhone

Question

When I use Fabric.js to generate canvas, there is annoying flickering when tapped with finger in iPad (mini) and iPhone (4). The flickering is like canvas goes fast to black and then white again.

Steps to reproduce:

1. With iPad or iPhone surf to eg. this line drawing utility: http://jsfiddle.net/fabricjs/URWru/ ( function dummy{} )

2. Put your finger on to the canvas and lift it then back. Do this fast, as you do when clicking with mouse. The flickering occurs when finger is up. If you hold your finger a second or more on the canvas and then lift back, the flickering doesn't occur.

Why the flickering occurs and what could be done to prevent it?

Answer 1

This is Q&A style answer.

The solution is simple. Add this to css:

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

Ryan Grove describes the reason in yuiblog.com :

"Unfortunately, Mobile Safari has no way to distinguish between normal click subscribers and delegated click subscribers, which is when the click event is attached to a container rather than to each child of that container. As a result, a delegated click will result in the entire container being highlighted rather than just the item that was tapped, and this can be both ugly and confusing for the user."

This trick is reported to work at least: Android based browsers , iPhone Safari, iPad Safari, iPad Chrome.