Fabric.js帆布在iPad和iPhone上閃爍

Question

當我使用Fabric.js生成畫布時，在iPad（迷你）和iPhone（4）中用手指敲擊時會出現惱人的閃爍。 閃爍就像帆布快速變黑而再變白。

重現步驟：

1. 用iPad或iPhone瀏覽例如。 此線條繪制實用程序： http ： //jsfiddle.net/fabricjs/URWru/ （ function dummy{} ）

2. 將手指放在畫布上然后將其抬起。 這樣做很快，就像用鼠標點擊一樣。 手指向上時會發生閃爍。 如果您將手指放在畫布上一秒鍾或更長時間然后向后抬起，則不會發生閃爍。

為什么閃爍發生以及可以采取哪些措施來防止它？

Answer 1

這是Q＆A風格的答案。

解決方案很簡單。 將此添加到css：

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

Ryan Grove在yuiblog.com中描述了原因：

“不幸的是，Mobile Safari無法區分普通點擊訂閱者和委派點擊訂閱者，這是將click事件附加到容器而不是該容器的每個子容器的時候。因此，委派的點擊將導致整個容器被突出顯示而不僅僅是被點擊的項目，這對用戶來說既丑陋又令人困惑。“

據報道，這個技巧至少起作用： 基於Android的瀏覽器 ，iPhone Safari，iPad Safari，iPad Chrome。