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

Question

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

这是说明行为的 gif。

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

我还认为这可能是选择颜色(因为我可以在各种网站上复制它)所以尝试使用也没有帮助的选择器

::selection {
  background: transparent;
}

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

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

关于这可能的起源有什么想法吗？

Answer 1

挖得真好。我有同样的问题加上另一个问题，这是我的解决方案。帖子很旧，但今天有人会像我一样发现它有用。

首先，强制背景完全覆盖了我的链接文本，因为我在标题链接上使用了 user-select: none;。所以这是要检查的，以防万一。

关于背景颜色，Force Touch 不使用链接父元素背景，而是使用其下方的背景。如果你想“感受一下”，我们可以说 Forced Touch 深入到直接父背景，让底层出现。

因此，为了解决这个问题而不必触摸背景颜色，我在父元素中使用了一些 z-index 来提升它，防止强制触摸“挖掘”:)

因此，如果您的链接父元素名为 card，您可以将其添加到您的 CSS 中:

.card {
isolation: isolate;
z-index:1;
}

现在，Force Touch 将按照我们的意愿使用父背景颜色。