如何在我的网站中禁用 Safari 的实时文本？

Question

我正在制作一个 Vue 应用程序，在导航栏中我有一个徽标，当您单击它时，它会将您发送到主页。

标志是一个.svg带有网站名称的，有两行。假设该网站名为 HelloWorld.com，徽标有点像这样：

你好

世界网

在 Safari 中，实时文本会显示（类似这样）并添加一个可以将用户发送到 world.com 的层，这不是最佳的用户体验。

有什么方法可以从 Vue、HTML、CSS 中禁用此功能吗？

我尝试过将此属性用于我的 img 标签：

<img
@click="goToHome()" 
class="img-logo-navbar" 
src="/imgs/logo-RCN-black.svg"
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none; -webkit-touch-callout: none;" 
unselectable="on"
onselectstart="return false;"
onmousedown="return false;"
/>

Answer 1

这个片段为我解决了这个问题。它似乎与您已经尝试过的内容重叠，因此 Safari 可能添加了现在尊重的代码-webkit-user-select=)

#myContainer img {
  // Disable text selection for Safari Live Text
  -webkit-user-select: none !important;
  cursor: default;
}