【问题标题】：How do I stop iOS Chrome from dimming on touching a canvas?如何阻止 iOS Chrome 在触摸画布时变暗？
【发布时间】：2016-11-17 08:09:56
【问题描述】：

我有这个 css 来停止选择

  *, *:before, *:after {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }

我有这段代码来停止上下文菜单

gl.canvas.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  return false;
});

但是当我在 chrome iOS 中触摸屏幕时，它会变暗。这是问题的 gif，首先显示 chrome iOS，然后显示 safari iOS。

或者这里是 youtube 版本

注意：忽略图形卡顿。我的屏幕截图导出由于某种原因搞砸了

请注意，在 chrome 中，背景有时会闪烁灰色。在 Safari 中，它始终是白色的。这是我试图阻止的 chrome 中的灰色。

这真的很烦人，因为只是点击屏幕最终会有效地闪烁屏幕并且真的很分散注意力。

更新

所以我开始尝试从头开始并添加部分。看起来它与画布无关，它与 click 事件的列表有关。

如果我有

gl.canvas.addEventListener('click', function() {});

我得到了调光。如果我删除它，我不会。 touchstart 事件列表不会导致变暗

更新 2

所以它肯定不是与画布无关。如果我删除画布并只使用 div 但我正在检查 click 我会变暗

这些 CSS 设置没有帮助

* { 
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   pointer-events: none;
}

成功了

 elem.addEventListener('touchstart', function(e) {
    e.preventDefault();
 });

我不确定preventDefault 对touchstart 是否有任何其他影响

【问题讨论】：

【解决方案1】：

试试这个-webkit-tap-highlight-color: rgba(0,0,0,0);

如果这不起作用，请尝试pointer-events: none;

【讨论】：

【解决方案2】：

TL;DR：这修复了它

elem.addEventListener('touchstart', function(e) {
   e.preventDefault();
});

长版：查看问题底部的更新

【讨论】：

【解决方案3】：

这是一个很晚的答案，但可能对某人有用。在带有触摸屏的 Windows 设备上（仅）在 Chrome 中的全屏画布上遇到同样的问题。一种解决方法是在画布上添加一个touchend 事件和touchstart。

nativeElement.addEventListener('touchend', function(e){ e.preventDefault(); })

【讨论】：