iPad和iPhone中的Fabric.js画布闪烁

蒂莫·卡科宁(TimoKähkönen)

当我使用Fabric.js生成画布时,在iPad(迷你)和iPhone(4)中用手指轻击时会出现烦人的闪烁。闪烁就像画布快速变黑然后再变白。

重现步骤:

  1. 用iPad或iPhone上网冲浪。此画线工具:http : //jsfiddle.net/fabricjs/URWru/function dummy{}

  2. 将手指放在画布上,然后将其抬起。快速执行此操作,就像使用鼠标单击时一样。手指举起时会发生闪烁。如果手指在画布上停留一秒钟或更长时间然后向后抬起,则不会发生闪烁。

为什么会发生闪烁?如何防止闪烁?

蒂莫·卡科宁(TimoKähkönen)

这是问答式的答案。

解决方案很简单。将此添加到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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

iPad和iPhone中的Fabric.js画布闪烁

来自分类Dev

画布中的图像闪烁

来自分类Dev

页面加载时关闭画布响应菜单闪烁-js和bootstrap 3

来自分类Dev

画布旋转 - Fabric js

来自分类Dev

在Fabric.js中全屏显示画布

来自分类Dev

在 safari 中设置阴影和渐变时画布圆弧函数闪烁

来自分类Dev

在画布HTML5和Fabric js中的图像上添加删除图标

来自分类Dev

使用Fabric.js启用和禁用画布的鼠标事件

来自分类Dev

WPF 运行时对画布抖动和抖动和闪烁的移动和调整大小控制

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

Fabric.js-淡出对象并从画布中删除

来自分类Dev

Fabric.js中彼此重叠的两个画布

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

fabric js-根据画布中添加的矩形调整完整画布的大小,以实现裁剪

来自分类Dev

Fabric.js:在画布中设置新图像,但画布未更改

来自分类Dev

Fabric.js画布图像抗锯齿

来自分类Dev

缩放fabric.js画布对象

来自分类Dev

Fabric.js画布混合模式

来自分类Dev

保存用fabric.js创建的画布

来自分类Dev

使用fabric.js的全屏画布模式

来自分类Dev

Fabric.js画布上的GIF动画

来自分类Dev

画布在不断闪烁

来自分类Dev

在画布中渲染Three.js场景

来自分类Dev

JS画布中ctx的旋转线

来自分类Dev

在iPhone / iPad上滚动时,侧边栏导航菜单闪烁

来自分类Dev

Angular.js和Fabric.js:一旦代码移至Angular指令,Fabric画布就会改变行为

来自分类Dev

画布和舞台在easel.js 中失去全局范围

来自分类Dev

重新定位画布时,Fabric.js画布坐标的值会更改

来自分类Dev

如何使用Fabric.js实现画布平移

Related 相关文章

热门标签

归档