html - iPhone上的Force/3dTouch手势为元素提供了奇怪的背景

Question

我有一个按钮，它是带有 href 的元素，它没有在/ /上<a>设置任何背景，但是在 force/3dTouch 点击时，它只会在文本下得到这个奇怪的 #b8b8bc 背景（虽然没有任何子元素，例如等等，所以我想这是文本节点突出显示）。:active:focus:visited<a><span>

这是说明行为的 gif。

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

我也认为这可能是选择颜色（因为我可以在各种网站上重现它）所以尝试使用也没有帮助的选择选择器

::selection {
  background: transparent;
}

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

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

关于这可能的起源的任何想法？

标签： htmlcss

Answer 1

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

尝试设置*{background: red}。如果工作尝试在少数父母上设置相同.parent1 { background: pink}，等等。在我的情况下.parent2 { background: lightblue}，.parent1 { background: salmon}我发现应用于强制触摸文本的颜色是菜单包装器的背景，当菜单打开时占据大部分屏幕。

此更改的副作用 - 所有 forcetouched 元素将具有相同的颜色，没有指定:hover或:active颜色的选项（您可以在第一次单击时看到颜色略有不同）并且所有链接都将具有相同的背景：

我想您可以尝试根据单击的内容通过 JS 设置包装器的背景。不确定这是否可行。在此处查看文档：

WebKit DOM 编程主题

到目前为止，这对我来说似乎太脆弱而无法触摸，我不建议这样做。虽然你可以改变这种颜色，但我决定让操作系统在这里做它想做的事情。