iOS Safari点击/长按链接时元素出现粗白边框，如何消除？

我站点内所有链接类型元素（文本、图片、SVG元素、表格单元格等）均存在异常表现：在iOS系统的Safari浏览器中长按时，弹出链接预览前，元素周围会出现一条粗白边框。

由于该问题仅在iOS端出现，调试条件受限。已尝试iOS Safari链接点击问题的主流推荐修复方案，但均未解决问题，所用CSS代码如下：

html {
    -webkit-tap-highlight-color: transparent;
}
a, a:visited, a img {
    -webkit-background-clip: content-box;
}
input, textarea, button, select, label, a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

这个粗白边框是iOS Safari针对可点击链接元素长按预览时的系统默认绘制外边框，之前使用的-webkit-tap-highlight-color仅控制点击瞬间的高亮色，对长按预览触发的边框无效。可按需求选择以下方案修复：

方案1：保留长按预览功能，仅隐藏边框 #

添加如下CSS规则即可：

/* 清除所有元素的默认焦点环样式 */
*:focus, *:active {
  outline: none !important;
}
/* 覆盖iOS Safari特有焦点环颜色 */
:root {
  -webkit-focus-ring-color: transparent !important;
}

如果仍有异常，可额外给所有可点击元素添加硬件加速触发规则，避免渲染异常：

a, button, [role="button"], input, [onclick] {
  transform: translateZ(0);
}

方案2：不需要长按预览功能，直接禁用交互 #

如果站点不需要iOS Safari长按链接弹出的预览、拷贝链接等系统菜单，可直接添加如下规则，从根源上避免边框出现：

a, button, [role="button"], input, [onclick] {
  -webkit-touch-callout: none;
}

验证注意事项 #

iOS端Safari缓存逻辑严格，修改后需清理浏览器缓存，退出Safari后台重新打开再测试效果。

内容的提问来源于stack exchange，提问作者Oliver