-webkit-tap-highlight-color: transparent 仅对可激活元素生效，必须精确匹配 a、button、input、textarea、[onclick]、[ontouchstart]、[role="button"]、[tabindex="0"] 等选择器，且值须为 transparent 或 rgba(0,0,0,0)，不继承、不支持伪类、真机测试才可见效果。
-webkit-tap-highlight-color: transparent 是唯一有效的解法，但它不是“加了就消失”的全局开关——它只对浏览器认定为“可激活”的元素起作用，且必须满足语义、行为、样式三重条件。
哪些元素能生效？必须是可点击语义或显式声明
WebKit（iOS Safari、旧版 Android Chrome）只给以下几类元素绘制 tap 高亮：
-
a、button、input、textarea这类原生可交互语义标签 - 带
onclick或ontouchstart属性的元素（如<div onclick="doSomething()">） - 没有内联事件但通过 JS 绑定了
addEventListener('click', ...)的元素，必须额外加role="button"或tabindex="0"，否则 iOS Safari 直接忽略
纯 div + CSS class + JS click 监听，不加 role 或 tabindex，在真机上根本不会触发高亮——也就谈不上“移除”。这不是 bug，是 WebKit 的激活判定逻辑。
为什么写了 -webkit-tap-highlight-color: transparent 还有灰块？
常见失效原因不是语法错，而是命中失败或值被忽略：
立即学习“前端免费学习笔记（深入）”；
- 写在
body、*或.container上：该属性不继承，选择器必须精确匹配目标元素 - 值用了
rgba(0,0,0,0.01)、none、unset：只有transparent和rgba(0,0,0,0)被识别；半透明 alpha ≠ 0 就会显示灰蒙层 - CSS 优先级被覆盖：比如第三方 UI 库（如 Ant Design Mobile）的样式后加载，把你的规则干掉了，得加
!important或提升选择器 specificity - Vue/React 动态渲染节点未被样式捕获：v-if 切换后新插入的
button若没被当前 CSS 规则选中（例如用了 scoped style 但没用::v-deep），就不会生效
Android 和 iOS 的兼容写法怎么配？
不能只靠前缀，得按设备能力分层处理：
- iOS Safari（所有版本）：只认
-webkit-tap-highlight-color，必须写 - Android Chrome 70+：支持标准
tap-highlight-color，但加了也没坏处；62–69 版本完全无视该属性，无法关闭高亮 - 别写
-moz-或-ms-前缀：Firefox 和 Edge Mobile 不支持该属性，写了白写
推荐最小安全集：
a,
button,
input,
textarea,
[onclick],
[ontouchstart],
.clickable,
[role="button"],
[tabindex="0"] {
-webkit-tap-highlight-color: transparent;
}
注意：[tabindex="0"] 比 [tabindex] 更稳妥，避免匹配到 tabindex="-1" 这种不可聚焦的场景。
真机测试比 DevTools 设备模拟重要得多
Chrome DevTools 的设备模拟模式默认禁用 tap 高亮，开发时点不出灰块，不代表线上没问题。尤其要注意：
- iOS Safari 至今不支持无前缀
tap-highlight-color，漏掉-webkit-就是失效 - UC 浏览器旧版本对
rgba(0,0,0,0)支持不稳定，transparent是更保守的选择 - 某些 WebView（如微信内置）基于较老 Chromium 内核，可能仍处于 Chrome 69 状态，高亮无法关闭——这时候得靠视觉妥协，比如让按钮背景色足够深，弱化灰块对比度
最易被忽略的一点：这个属性和 outline: none 完全无关，也压不住 :active 样式；它是在合成层独立绘制的蒙版，关不掉就只能接受它存在。
