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

Posted 2023-03-06

【中文标题】iPad Safari：点击链接时如何禁用快速闪烁效果

【英文标题】：iPad Safari: How to disable the quick blinking effect when a link has been hit

【发布时间】：2011-03-31 18:41:30

【问题描述】：

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

【问题讨论】：

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

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

【参考方案1】：

您可以为该元素的-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) 设置透明度。

【参考方案2】：

在 Phonegap 中使用移动 Safari，仅此方法有效：

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

来源：iPhone WebKit CSS animations cause flicker

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

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

来源：Prevent flicker on webkit-transition of webkit-transform

【讨论】：

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