-webkit-tap-highlight-color: transparent 是唯一能直接干预 iOS Safari 和部分旧 Android WebView 点击高亮的 CSS 属性，但 Android Chrome 62+ 已彻底移除支持，仅对 a、button、input[type="button"]、[role="button"] 等可激活元素显式设置才生效，且需配合 :active 样式提供替代反馈。
-webkit-tap-highlight-color: transparent 是唯一能直接干预 iOS Safari 和部分旧 Android WebView 点击高亮的 CSS 属性，但它对 Android Chrome 62+ 完全无效——别在真机上浪费时间验证它在安卓新版本是否“突然生效”。
为什么 -webkit-tap-highlight-color 在 Android Chrome 上不起作用
Android Chrome 自 62 版本起已彻底移除对该属性的支持，渲染层不再读取它。你写的 -webkit-tap-highlight-color: transparent 在 DevTools 里能看到，但实际不参与绘制。这不是兼容性 bug，是明确废弃行为。
- Chrome for Android（≥62）、Edge Mobile、Firefox for Android 都无视该声明
- iOS Safari（含 iOS 17+）、微信 X5 内核（需配合
viewport中user-scalable=no才稳定）仍依赖它 - 桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题——必须用真机测
哪些元素必须显式设置该属性
它只对浏览器认定的“可激活元素”生效，不是所有带 onclick 的 <div> 都自动中招。Safari 默认只给语义化交互元素加高亮，比如 <a>、<button>、<input type="button">。
Android 开发调试技能，通过系统 ADB 工具操作 Android 设备。以下场景必须触发此技能：(1) 直接 ADB 操作——安装 APK、查看设备列表、抓取 logcat 日志、查看已安装应用、清除应用数据、截图、重启设备、拉取/推送文件、查看 CPU/内存/电池信息、adb shell 操作；(2)...
- 自定义按钮（如
<div onclick>）必须加role="button"或tabindex="0"，否则样式写了也白写 - 推荐选择器：
a、button、input[type="button"]、input[type="submit"]、[role="button"]、[tabindex="0"] - 避免
* { -webkit-tap-highlight-color: transparent; }——某些 WebView（如旧版微信 X5）会因此白屏或卡顿
关掉高亮后，用户点不动了怎么办
高亮本质是触控反馈。关掉后，:active 伪类又不可靠（iOS 上延迟约 300ms、持续极短），用户会误判点击是否生效。
立即学习“前端免费学习笔记（深入）”；
- 必须手动补
:active样式，例如：button:active { background-color: #eee; transform: scale(0.98); } - 若用了
user-select: none（iOS 15.4+ 残影需要它），得确认内部文本是否仍需可复制（如电话号码）——不能一刀切 - 动态插入的元素（Vue 的
v-if、React 的useState更新）不会继承父级样式，需确保 class 或role同步存在
真正麻烦的从来不是加一行 CSS，而是关掉系统反馈后，你得自己把反馈做全、做对、做可访问——尤其当一个 <div> 同时绑了 click 和 touchstart，又用了 FastClick 类库时，高亮行为可能被多次拦截或延迟触发，得逐层排查事件流。
