iOS Safari：点击结束后点击突出显示（-webkit-tap-highlight）卡在屏幕上

Question

非常简单的问题：我的单页应用程序在 Safari 上具有正常的 WebKit 点击突出显示，因此当您点击时会出现一个半透明的灰色框并消失。这是正常的 Safari 行为，是需要的。

有时，在 iPad 上，灰色框会出现但不会消失；按钮点击通过，按钮的效果按预期执行（例如，更改路线），但灰色框保持不变，直到您再次点击。

灰色框不在 DOM 中 - 我几乎可以肯定它是 Safari 的点击突出显示，而不是我们添加的内容。

用@media hover(hover) { hover styles here } 抵消“粘滞悬停”没有任何作用，所以我认为这不是粘滞悬停问题。

使用-webkit-tap-highlight: transparent; 禁用点击突出显示通过使所有点击突出显示消失来解决问题。这不是一个很好的解决方案。期望的行为是让点击突出显示，并让它们行为正确。

这是一个相对较新的问题，所以我认为我们做了一些事情来导致这种行为，但我不知道是什么。有什么想法吗？

谢谢！

Answer 1

我们在 IOS 上的 Flutter 应用中打开 Web 视图时遇到了类似的问题，该问题是由于将我们的整个应用包裹在手势检测器中导致 -webkit-tap-highlight 卡在屏幕上造成的。

不确定您使用的是什么堆栈，但希望这可以帮助您或遇到类似问题的任何人解决它。