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

ipad mobile-safari

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

你为什么想要？这样用户就知道他们实际上激活了某些东西……这非常有帮助。

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

kennytm

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

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

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

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

作为记录，我在 Phonegap 中制作的一个应用程序在点击元素时一直有短暂的闪烁，这对我来说很明显。将 -webkit-tap-highlight-color:transparent 设置为所有内容（即 *）就像一个魅力。

Charlie - 您看到的问题是因为 Webkit 似乎会在项目变为非活动状态后将高亮颜色短暂应用于项目。与设置这样的全局规则不同，将 -webkit-tap-highlight-color: rgba(0,0,0,0); 添加到目标链接的非活动状态可以解决问题。

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

Community

在 Phonegap 中使用移动 Safari，只有这样有效：

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

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

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

有没有我需要担心的 Mozilla 版本？