javascript - 如何阻止 iOS Chrome 在触摸 Canvas 时变暗？

Question

我有a webpage using WebGL on a fullscreen canvas .

我有这个 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 版本

https://youtu.be/1Znsehs-n8E

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

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

这真的很烦人，因为只是点击屏幕最终会有效地闪烁屏幕，这真的很让人分心。

更新

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

如果我有

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

它让我变暗了。如果我删除它，我不会。列出 touchstart 事件不会导致变暗

更新2

所以它肯定与 Canvas 不无关。如果我移除 Canvas 并只使用 div 但我正在检查 click 我会调暗

这些 CSS 设置没有帮助

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

这有效

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

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

Answer 1

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

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