-webkit-tap-highlight-color: transparent 在 iOS Safari 上常失效，因其仅对可激活元素（如 <a>、<button>）生效；自定义元素需 role="button" + tabindex="0"；不继承、不可写在伪类中，且必须严格设为 transparent 或 rgba(0,0,0,0)。
直接写 -webkit-tap-highlight-color: transparent 通常没用，不是代码错，而是浏览器不认、元素不匹配，或者根本没在真机上测。
为什么 -webkit-tap-highlight-color 在 iOS Safari 上经常失效
这个属性只对 WebKit 内核生效，iOS Safari 是主力场景，但它的行为非常“挑人”：
- 必须作用于可激活元素：原生
<a>、<button>、<input type="button">才默认命中；自定义<div onclick>必须同时带role="button"和tabindex="0" - 不能写在伪类里：
a:active { -webkit-tap-highlight-color: transparent; }完全无效 - 不继承：父级设了
body { -webkit-tap-highlight-color: transparent; }，子元素不会自动获得 - 值必须严格是
transparent或rgba(0,0,0,0)—— 写成none、unset、rgba(255,255,255,0)都可能被忽略 - 桌面 Chrome 的设备模拟器默认关闭 tap 高亮，开发阶段根本看不到问题
哪些选择器必须显式覆盖
别用 * { -webkit-tap-highlight-color: transparent; }，某些 WebView 下会白屏或卡顿。推荐精准命中：
-
a、button、input[type="button"]、input[type="submit"] -
[role="button"]、[tabindex="0"]（注意：仅当该元素绑定了 click/touchstart） - 动态渲染节点（如 Vue 的
v-if、React 的useState切换）需确保role或tabindex同步存在，否则高亮会重新出现
iOS 15.4+ 还有灰白残影怎么办
单独设 -webkit-tap-highlight-color: transparent 在较新 iOS 上仍可能残留微弱闪烁——这不是高亮没关掉，而是系统默认的文本可选行为触发了重绘干扰。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
user-select: none才算真正干净 - 但如果元素内含需复制的内容（如电话号码、地址），不能整块禁用，应改用包裹方式隔离：
<span class="selectable">138-0013-8000</span>，再对.selectable单独设user-select: text - 某些 Hybrid App 的 WebView 内核老旧，即使写了
transparent仍残留微弱灰边，这时得一并清理outline: none和border: none
关掉高亮后用户点下去没反馈怎么办
-webkit-tap-highlight-color 是系统级视觉反馈，关掉后你得自己补上，否则用户容易误判是否点中。
-
:active不能简单替代：它在 iOS 上延迟明显、持续时间极短，肉眼几乎不可见；且滑动离开就中断 - 推荐用
transform: scale(0.95)或background-color变化 +transition提供即时反馈 - 如果用了
touch-action: manipulation，记得同步加该反馈——它禁用双击缩放的同时也会让:active更快响应
真正难处理的是混合场景：一个 <div> 同时绑了 click 和 touchstart，又用了 FastClick 类库，这时候高亮行为可能被多次拦截或延迟触发，得逐层排查事件流。别只盯着 CSS，得看真实设备上的事件路径是否完整。
