Geek asks and answers

Fabric.js canvas flickers on iPad and iPhone

When I use Fabric.js to create a canvas, there is annoying flickering when I tap my finger on the iPad (mini) and iPhone (4). Flickering is like a canvas that quickly turns black and then white again.

Steps to play:

  • With an iPad or iPhone, you can surf, for example. this line drawing utility: http://jsfiddle.net/fabricjs/URWru/ ( function dummy{})

  • Put your finger on the canvas and lift it back. Do it quickly, just like when you click the mouse. Flickering occurs when the finger is up. If you hold your finger on a canvas or canvas, and then lift it back, flicker does not occur.

Why does flicker occur and what can be done to prevent it?

+3
source share
1 answer

This is a Q & A response .

The solution is simple. Add this to css:

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

Ryan Grove describes the reason at yuiblog.com :

“Unfortunately, Mobile Safari is not able to distinguish between regular click subscribers and delegated subscribers, that is, when the click event is bound to a container and not to each child of this container. As a result, a delegated click will cause the entire container to be highlighted, not just the item that was used, and it can be both ugly and confusing for the user. "

This trick works as a minimum: Android browsers , iPhone Safari, iPad Safari, iPad Chrome.

+5
source

More articles:


All Articles