javascript - Fabric.js Canvas 在 iPad 和 iPhone 中闪烁

Question

当我使用 Fabric.js 生成 Canvas 时，在 iPad (mini) 和 iPhone (4) 中用手指轻敲时会出现恼人的闪烁。闪烁就像 Canvas 快速变黑然后变白。

重现步骤:

1. 使用 iPad 或 iPhone 上网，例如。这个画线工具: http://jsfiddle.net/fabricjs/URWru/ (函数虚拟{})

2. 将手指放在 Canvas 上，然后将其抬起然后放回。快速执行此操作，就像您用鼠标单击时所做的那样。手指向上时会发生闪烁。如果您将手指放在 Canvas 上一秒钟或更长时间，然后再抬起，就不会出现闪烁。

为什么会出现闪烁以及如何防止闪烁？

Answer 1

这是 Q&A风格回答。

解决方法很简单。将此添加到 css:

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

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

“不幸的是，Mobile Safari 无法区分普通点击订阅者和委托(delegate)点击订阅者，即当点击事件附加到容器而不是该容器的每个子容器时。因此，委托(delegate)点击将导致整个容器被突出显示，而不仅仅是被点击的项目，这对于用户来说既难看又令人困惑。”

据报道此技巧至少有效:Android based browsers 、iPhone Safari、iPad Safari、iPad Chrome。