iPad Safari：点击链接后如何禁用快速闪烁效果

有什么办法可以禁用它吗？
我的意思是在浏览器中...单击链接，按钮或具有单击功能的div时，它会闪烁一个灰色框，您可以在其中快速单击。我该如何预防？

ipad mobile-safari

— 猫
source

你为什么要如此一来，用户就知道他们实际上已经激活了某些东西……这非常有帮助。

— Fosco 2010年

基本上，我在大图像上方有一个div。当他们双击它时，它会放大。（由于其他原因，我已禁用了缩放选项），当您单击它一次时，它允许工具栏显示或消失。由于此div是透明的，因此我不希望它在每次单击它时都闪烁。但是，我将其保留在其他大多数按钮上。

— 猫

Answers:

216

您可以为该元素的-webkit-tap-highlight-color属性设置透明颜色。

a {
    -webkit-tap-highlight-color: transparent;
}

— 肯尼
source

即：-webkit-tap-highlight-color: rgba(0,0,0,0);

— CrazyTim 2012年

非常酷，谢谢。我将其添加到包含我的移动应用程序的容器div中，但假定您也可以将其添加到body元素中：body {-webkit-tap-highlight-color：rgba（0,0,0,0）; }

— B-Money

记录下来，我在Phonegap中制作的一个应用程序在点击元素时一直短暂闪烁，这让我很烦。设置-webkit-tap-highlight-color:transparent一切（*例如）就像一种魅力。

— 查理

查理（Charlie）-您看到的问题是因为Webkit似乎在项目变为非活动状态时便短暂地将突出显示颜色应用于该项目。不必像这样设置全局规则，而是将其添加-webkit-tap-highlight-color: rgba(0,0,0,0);到目标链接的非活动状态即可解决此问题。

— Michael Johnston

只是想补充一点，使用webkit-tap-highlight-color: none并不能正常工作。您实际上必须通过设置透明度rgba(0,0,0,0)。

— matthewpavkov 2014年

在Phonegap中使用移动Safari，只有以下方法有效：

* {  -webkit-backface-visibility:  hidden;
     -webkit-tap-highlight-color:  transparent;
  }

另外，在主面板上，启用渲染：

div.myPanelOrWhatever 
  {
      -webkit-transform: translate3d(0, 0, 0)
  }

— 柔和的
source

我需要担心的Mozilla版本吗？

— Sterling Bourne