-webkit-tap-highlight-color: transparent 是唯一有效解法，但仅对 iOS Safari 和微信 X5 等 WebKit 内核生效；Android Chrome 62+ 已忽略该属性，且需配合 user-select: none 消除 iOS 15.4+ 灰白闪烁，同时必须手动添加 :active 反馈以保障可用性与可访问性。
-webkit-tap-highlight-color: transparent 是唯一有效解法，但它只对 iOS Safari 和微信 X5 等 WebKit 内核生效；Android Chrome 62+ 已彻底忽略该属性，别指望它跨平台起作用。
为什么 outline: none 和 :active 都没用
点击高亮不是 outline，也不是 :active 的视觉表现，而是 WebKit 渲染层独立绘制的一层半透明 overlay。它在 touchstart 瞬间就出现，持续到 touchend 后一小段时间，和 CSS 伪类生命周期完全分离。
-
outline: none只影响键盘焦点框，对触控高亮零作用 -
a:active { background: #eee }在 iOS Safari 上基本不可见——:active触发窗口极短（约 100–200ms），且有明显延迟 - 桌面 Chrome 设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题，必须真机验证
哪些元素必须显式设置 -webkit-tap-highlight-color
该属性不继承、不支持通配符，只对真实可激活元素生效。以下选择器必须写全：
-
a、button、input[type="button"]、input[type="submit"] - 带
role="button"且tabindex="0"的div（仅onclick不够） - 动态渲染的按钮（如 Vue
v-if、ReactuseState）需确保新 DOM 节点也匹配该选择器，否则高亮会重新出现
错误写法示例：* { -webkit-tap-highlight-color: transparent; } —— 某些微信 X5 内核会白屏；body { -webkit-tap-highlight-color: transparent; } —— 子元素不会继承。
立即学习“前端免费学习笔记（深入）”；
iOS 15.4+ 残留灰白闪烁怎么办
即使设了 -webkit-tap-highlight-color: transparent，iOS 15.4+ 仍可能残留微弱灰白闪烁。这不是样式失效，而是系统默认文本可选行为触发的重绘干扰。
- 必须配合
user-select: none才算干净 - 但含电话、地址等需复制内容的区域，要用包裹容器，并单独设
user-select: text - 值只能是
transparent或rgba(0,0,0,0)；none、unset、initial全部无效
关掉之后用户点不动？得补反馈
高亮本质是触控反馈。关掉后，用户点下去没视觉响应，容易误判是否点中。
- 给按钮加
:active { transform: scale(0.98); }或background-color: #e9ecef; - 用
div模拟按钮时，除了-webkit-tap-highlight-color: transparent，还得加cursor: pointer和role="button" - 检查 computed styles，确认该属性是否真实生效（非 strikethrough 状态）
真正麻烦的从来不是加一行 CSS，而是关掉系统反馈后，你得自己把反馈做全、做对、做可访问。
