如何在触摸画布时阻止iOS Chrome变暗？

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中触摸屏幕时，它会变暗。这是首次展示Chrome iOS的问题的gif，然后展示了safari iOS。

或者这是一个youtube版本

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

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

注意在镀铬时，背景有时会闪烁灰色。在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是否还有其他影响

Answer 1

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

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

Answer 2

TL; DR：这解决了它

KMP_AFFINITY

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

Answer 3

这是一个很晚的答案，但也许对某人有用。面对带有触摸屏的Windows设备上Chrome（仅）中的全屏画布上没有的相同问题。一种解决方法是在画布上添加touchend之外的touchstart事件。

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