-webkit-tap-highlight-color: transparent仅对webkit内核（ios safari、微信x5）生效，android chrome 62+已彻底忽略；必须显式作用于可激活元素（a/button/role="button"+tabindex="0"），值仅transparent或rgba(0,0,0,0)有效，不继承、不可写在伪类中，且需配合user-select: none消除ios 15.4+残影。
为什么-webkit-tap-highlight-color: transparent经常失效
它只对 WebKit 内核生效（iOS Safari、微信 X5），Android Chrome 62+ 已彻底忽略，写了也白写；真机测不出效果，大概率不是代码错，而是浏览器不支持、元素没匹配上，或者压根没在真机上跑。值必须是 transparent 或 rgba(0,0,0,0)，写成 none、unset、rgba(255,255,255,0) 都无效；不能写在伪类里，比如 a:active { -webkit-tap-highlight-color: transparent; } 是废的；也不继承，body 或 * 上设了，子元素不会自动获得。
哪些元素必须显式加-webkit-tap-highlight-color
该属性只对“可激活元素”自身生效，不是所有带 onclick 的 div 都自动命中。必须确保目标节点满足以下任一条件：
- 原生语义元素：
a、button、input[type="button"]、input[type="submit"] - 自定义按钮：同时带
role="button"和tabindex="0"，且绑定了click或touchstart - 动态渲染节点（如 Vue 的
v-if、React 的useState切换）若没同步role或tabindex，高亮会重新出现
推荐统一选择器：a, button, input[type="button"], input[type="submit"], [role="button"][tabindex="0"]；避免用 * { -webkit-tap-highlight-color: transparent; }——某些 WebView 下会导致重绘异常或影响表单输入体验。
iOS 15.4+ 点击后仍有灰白残影怎么办
这不是高亮没关掉，而是系统默认的文本可选行为触发了重绘干扰。仅设 -webkit-tap-highlight-color: transparent 不够，必须配合：
-
user-select: none—— 关键，否则残留闪烁无法消除 - 若元素内含需复制的内容（如电话号码、地址），不能整块禁用，应把可选文本用
<span class="selectable"></span>包裹，再对.selectable单独设user-select: text - 某些 Hybrid App 的 WebView 内核老旧，即使写了
transparent仍残留微弱灰边，这时得一并清理outline: none和border: none
关掉高亮后用户点下去没反馈，怎么补
-webkit-tap-highlight-color 是系统级视觉反馈，关掉后你得自己补上，否则用户容易误判是否点中：
-
:active伪类无法替代它——两者触发机制完全不同，:active在 iOS 上延迟明显、持续时间极短，肉眼几乎不可见 - 推荐用
transform: scale(0.98)或opacity: 0.8配合transition实现轻量反馈 - 注意：不要依赖
outline或box-shadow模拟，它们在点击瞬间可能被高亮层覆盖，且动画节奏难对齐
最易被忽略的是动态插入元素的 role 同步和 user-select 的分层控制——漏掉任意一环，残影或无反馈都会回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
