阻止突出显示iOS上的文本

Question

我有一个web应用程序，它使用一个HTML canvas，通过使用JavaScript鼠标和触摸事件进行交互。最近，如果用户长按画布，iOS Safari已经开始在画布上放置文本突出显示标注。由于画布是要在iOS设备上与之交互的，因此出现的这种标注会破坏用户体验。

突出显示出现在画布的备用文本( canvas元素的内容)上，即使浏览器确实支持canvas，因此文本不应该出现。文本不可见，但从详图索引复制会将画布备用文本添加到剪贴板，以确认这是浏览器正在选择的文本。但是，从canvas元素中删除文本并不会阻止标注出现；它只是突出显示并允许复制空字符串。

尽管我在画布上使用了这些CSS属性，但问题仍然存在：

    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

问题演示：https://codepen.io/KingDragonhoff/pen/vYKoajK

显示的详图索引图像：https://imgur.com/a/dCm6uPC

如何阻止iOS Safari在画布元素上显示突出显示的标注？

Answer 1

把canvas放到div可以解决你的问题。

​

.container {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#canvas {
    background-color: firebrick;
}

html {background-color: #3d4359;}

<div class='container'>
    <canvas id="canvas" width="400" height="400">This is the canvas fallback text.</canvas>
</div>

​

试着在safari上检查这个代码：https://codepen.io/taimanh229/pen/YzGYLwQ (在iPhone7iOS13上通过)

Answer 2

这里的问题看起来是iOS设备假设页面上可以有可选择的内容。如果canvas是应该出现在页面上的唯一元素，则可以直接将样式应用于html元素。

在这种情况下，将样式添加到html选择器应该适合您。

html {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

不过，如果页面上还有其他东西，你可能不得不接受它也是不可选择的。