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

Question

有没有办法禁用这个功能？
我指的是在浏览器中... 当您单击链接、按钮或具有单击功能的div时，它会在您单击的位置快速闪烁一个灰色的框。如何防止这种情况发生？

- cat

---

为什么要这样做？这么做是为了让用户知道他们实际上激活了某个功能...这非常有帮助。 - Fosco

基本上，我有一个在一张大图片上方的 div。当用户双击它时，它会放大。（因为其他原因，我已经禁用了缩放选项）。单击它一次后，会出现或消失一个工具栏。由于这个 div 是透明的，我不希望它在每次被单击时闪烁。但是，对于我的其他按钮，我会保留这个效果。 - cat

Answer 1

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

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

- kennytm

---

-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color：rgba（0,0,0,0）; - CrazyTim

非常酷，谢谢。我将它添加到包含我的移动应用程序的容器div中，但是你也可以像这样将其添加到body元素中：body {-webkit-tap-highlight-color: rgba(0,0,0,0);} - B-Money

记录一下，我正在使用Phonegap制作一个应用程序，当点击元素时，它会出现短暂的闪烁，虽然很轻微但足以引起我的注意。将-webkit-tap-highlight-color:transparent应用于所有元素（即*）就像魔法一样解决了这个问题。 - Charlie

Charlie - 你看到的问题是因为 Webkit 似乎会在项目变为非活动状态时短暂地应用高亮颜色。而不是设置全局规则，向目标链接的非活动状态中添加-webkit-tap-highlight-color: rgba(0,0,0,0); 可解决这个问题。 - Michael Johnston

只想补充一点，使用 webkit-tap-highlight-color: none 是不起作用的。你必须通过 rgba(0,0,0,0) 来设置透明度。 - matthewpavkov

有没有可能将其添加到整个页面主体中？这样你就不必为每个可点击的元素定义CSS了。类似于 body { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }。 - user1063287

Answer 2

在 Phonegap 中使用移动版 Safari，只有这个方法可行：

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

来源: iPhone WebKit CSS动画导致闪烁

此外，在主面板上启用渲染:

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

来源： 如何避免webkit-transform过渡时出现闪烁？

- redolent

---

有我需要担心的Mozilla版本吗？ - Sterling Bourne