我有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 版本
注意:忽略图形卡顿。由于某种原因,我的屏幕捕获导出搞砸了
请注意,在 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
是否有任何其他影响
最佳答案
试试这个 -webkit-tap-highlight-color: rgba(0,0,0,0);
如果这不起作用,请尝试 pointer-events: none;
关于javascript - 如何阻止 iOS Chrome 在触摸 Canvas 时变暗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38373684/