时间戳

首页 > 解决方案 > iOS Safari：点击结束后点击突出显示（-webkit-tap-highlight）卡在屏幕上

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

问题描述

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

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

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

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

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

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

谢谢！

标签： javascripthtmlcssiossafari

解决方案

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

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

推荐阅读