当我使用Fabric.js生成画布时,在iPad(迷你)和iPhone(4)中用手指轻击时会出现烦人的闪烁。闪烁就像画布快速变黑然后再变白。
重现步骤:
用iPad或iPhone上网冲浪。此画线工具:http : //jsfiddle.net/fabricjs/URWru/(function dummy{}
)
将手指放在画布上,然后将其抬起。快速执行此操作,就像使用鼠标单击时一样。手指举起时会发生闪烁。如果手指在画布上停留一秒钟或更长时间然后向后抬起,则不会发生闪烁。
为什么会发生闪烁?如何防止闪烁?
这是问答式的答案。
解决方案很简单。将此添加到css:
canvas {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
Ryan Grove在yuiblog.com中描述了原因:
“不幸的是,Mobile Safari无法区分正常点击订阅者和委派点击订阅者,这是将点击事件附加到容器而不是附加到该容器的每个子容器时的结果。因此,委派点击将导致整个容器被突出显示,而不仅仅是被点击的项目,这对于用户而言既丑陋又令人困惑。”
据报道,该技巧至少可以起作用:基于Android的浏览器,iPhone Safari,iPad Safari和iPad Chrome。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句