iphone上的Force/3dTouch手势为<a>元素提供了奇怪的背景

Question

我有一个按钮，它是带有href的<a>元素，它没有在:active/:focus/:visited，上设置任何背景，但在强制/3DTouch点击时，它只在文本下得到奇怪的#b8b8bc背景(而<a>没有任何子节点，例如<span>等，所以我想这是文本节点的高亮显示)。

​

​

以下是用于说明该行为的gif。

​

我已经尝试添加-webkit-tap-highlight-color: transparent，但它只改变常规的点击颜色，而不是强制/3D颜色

​

​

此外，我认为这可能是选择颜色(因为我可以在不同的网站上复制)，所以尝试使用选择选择器，这也没有帮助

::selection {
  background: transparent;
}

::-webkit-selection {
  background: transparent;
}

::-moz-selection {
  background: transparent;
}

有没有关于这个的可能来源的想法？

Answer 1

好的，我找到了一种基于父母的颜色的“解决方案”。

尝试设置*{background: red}。在我的例子中，我发现应用于强制触摸文本的颜色是菜单包装的背景，当菜单打开时，它占据了大部分屏幕。

此更改的副作用-所有强制触摸的元素将具有相同的颜色，没有指定:hover或:active颜色的选项(您可以在第一次单击时看到颜色略有不同)，所有链接将具有相同的背景：

​

​

我想你可以试着根据点击的内容通过JS设置包装器的背景。我不确定这是否会奏效。请参阅此处的文档：

WebKit DOM Programming Topics

到目前为止，这对我来说似乎太脆弱了，我不建议这样做。尽管你可以改变这个颜色，我还是决定让操作系统在这里做它想做的事情。