-webkit-tap-highlight-color: transparent可关闭iOS Safari点击高亮，但Android Chrome 62+已忽略；仅对a、button等可激活元素生效，须写在常态样式中，配合user-select: none防残留闪烁。
直接设 -webkit-tap-highlight-color: transparent 就能关掉 iOS Safari 的点击高亮，但 Android Chrome 从 62+ 已完全忽略它，别指望跨平台生效。
为什么 -webkit-tap-highlight-color 常常没效果
不是你写错了，是它只在特定条件下才触发：
- 必须作用于可聚焦/可激活元素：
<a>、<button>、带tabindex="0"或role="button"的<div>；纯onclick的<div>默认不生效 - 不能写在伪类里（比如
a:active），必须是元素的常态样式声明 - 值必须是
transparent或rgba(0,0,0,0)；写成none、unset或不透明色（如#ff0000）都会失效或体验极差 - 某些 iOS 版本（如 15.4+）即使设了
transparent，仍可能残留微弱灰白闪烁——这是文本可选行为导致的重绘，得配合user-select: none
哪些元素上必须加这个样式
它不会继承，也不能用 CSS 变量控制，必须显式写在目标元素上：
- 语义化元素：直接给
a、button、input[type="button"]等加 - 自定义交互容器：对绑了
click或touchstart的<div class="card">，需同时加role="button" tabindex="0"，再配-webkit-tap-highlight-color: transparent - 避免用
* { -webkit-tap-highlight-color: transparent }：部分 WebView 会异常，且影响可访问性工具识别点击区域 - 微信 X5 内核有隐藏依赖：必须页面含完整
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则可能直接忽略该样式
真机测试时最容易漏掉的三个点
桌面 Chrome 模拟器根本看不到问题，等上真机才发现满屏蓝灰块：
立即学习“前端免费学习笔记（深入）”；
- 开发阶段在 PC 上调试时，
-webkit-tap-highlight-color不会触发——它只在真实触摸设备上生效 - Vue/React 动态渲染的按钮（比如
v-if或useState切换出来的）如果没复用父级样式或 class，高亮会重新出现 - 用了 FastClick 或类似库时，高亮“消失”不是因为 CSS 生效了，而是事件机制被绕过；此时若要自定义反馈，得改用
pointerdown/pointerup监听
真正难处理的是混合场景：一个 <div> 同时绑了 click、touchstart 和 gesture，又用了第三方轮播组件——这时候高亮可能被多次拦截或延迟触发，得逐层排查事件流和样式作用域。
