android chrome 62+已彻底移除对-webkit-tap-highlight-color的支持，该属性仅在ios safari、微信x5等webkit内核浏览器中有效，且必须作用于a、button、[role="button"]等可聚焦元素，不可继承。
Android Chrome 62+ 已彻底移除 -webkit-tap-highlight-color 支持
这不是你写错了，而是浏览器直接不解析这行 CSS。Android Chrome 自 62 版本起已完全删除对该属性的支持，-webkit-tap-highlight-color: transparent 在这些版本中被静默忽略——哪怕你选择器精准、值合法、真机测试，也毫无效果。Firefox Android、Edge Mobile、Samsung Internet 同样从未实现它。只有 iOS Safari、微信 X5 内核、旧版 UC 或 QQ 浏览器等 WebKit 系或老旧 WebView 才认这个属性。
-webkit-tap-highlight-color 只对可聚焦元素生效，且不继承
即使在支持它的 iOS 环境下，该属性也只作用于浏览器认定的“可激活元素”：比如 a、button、input[type="button"]，或显式声明了 role="button" 或 tabindex="0" 的容器。常见错误包括：
- 把样式写在
body或* {}上——它不继承，子元素不会自动获得 - 给一个纯
div加了onclick却没补role="button"，iOS Safari 根本不触发高亮，你关了个寂寞 - 用
[onclick]选择器，但事件是通过addEventListener('click', ...)绑定的，CSS 无法匹配
安卓真机上别依赖 :active 替代高亮反馈
:active 和高亮机制完全无关：它在 iOS 上有约 300ms 延迟，且滑动松手即中断；而安卓 Chrome 62+ 根本没有系统高亮层，所以 :active 即使生效，也只是你自定义的点击态，不是“去除失败”的表现。但要注意：
- 在安卓上，
:active样式本身可能因 WebView 版本或 Hybrid 容器限制而不触发（尤其某些定制内核） - 别用
background-color做:active反馈——容易触发重排；推荐transform: scale(0.98)或opacity: 0.8 - 如果用了
touch-action: manipulation，部分安卓机型会顺带抑制默认行为，但这属于副作用，不可靠
真正跨平台的反馈控制得靠组合策略
单靠一行 CSS 无法统一解决，必须分层处理：
- 对 iOS / 微信：保留
-webkit-tap-highlight-color: transparent，选择器锁定为a, button, [role="button"], [tabindex="0"] - 对安卓 Chrome 62+：放弃该属性，转而用
touch-action: manipulation+:active主动提供轻量反馈 - 动态渲染元素（如 Vue
v-if、ReactuseState）必须确保新节点同步携带role="button"和对应 class，否则高亮会在切换后重现 - iOS 15.4+ 残留灰白闪烁？需叠加
user-select: none，但注意别误禁电话号码等可复制内容
最易被忽略的是：桌面模拟器根本不会触发 tap 高亮，开发阶段完全无感知。必须在 iOS Safari（含 iOS 17+）和 Android Chrome 真机上分别验证，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
