-webkit-tap-highlight-color: transparent 可关闭 iOS Safari 和旧 Android 浏览器点击高亮，但 Android Chrome 62+、Firefox 不支持，微信 X5 需 viewport 配合；:active 无法替代，因触发机制不同且持续时间极短；仅对可激活元素（如 a、button、role="button"）生效，需注意动态元素继承与 iOS 15.4+ 残影问题，推荐结合 user-select: none 及主动反馈样式。
直接设 -webkit-tap-highlight-color: transparent 能关掉 iOS Safari 和部分旧 Android 浏览器的点击高亮，但它不是万能开关——Android Chrome 62+ 已彻底无视它，Firefox 完全不支持，微信 X5 内核还依赖 viewport 配置才能生效。
为什么 :active 无法替代 -webkit-tap-highlight-color
两者触发机制完全不同：:active 是 CSS 伪类，只在“按下未松开”瞬间生效，且容易因滑动离开而中断；而 tap 高亮是 WebKit 渲染层的系统级图层叠加，独立于样式状态。常见错误是给 a:active 设了 background 却发现点下去还是有蓝灰遮罩——那正是 -webkit-tap-highlight-color 在起作用。
- 真机测试时，
:active在 iOS 上延迟明显、持续时间极短，肉眼几乎不可见 -
-webkit-tap-highlight-color一旦生效，会直接覆盖所有背景、边框甚至box-shadow - 不要指望用
outline: none或border: none消除它——它们和高亮层完全无关
哪些元素必须显式设置 -webkit-tap-highlight-color
该属性只对“可激活元素”生效，不是所有带 onclick 的 div 都自动中招。Safari 默认只给语义化交互元素加高亮，比如 <a></a>、<button></button>、<input type="button">。对自定义按钮（如 <div onclick="...">），必须补上 <code>role="button" 或 tabindex="0"，否则样式写了也白写。
- 推荐选择器：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] - 避免用
* { -webkit-tap-highlight-color: transparent; }—— 某些 WebView 下会导致重绘异常或影响表单输入体验 - 动态插入的元素（如 Vue 的
v-if、React 的useState切换）需确保 class 或 role 同步继承，否则高亮会重新出现
为什么加了 transparent 还有残影？
在 iOS 15.4+ 上，仅设 -webkit-tap-highlight-color: transparent 可能残留微弱灰白闪烁。这不是样式没生效，而是系统默认的文本可选行为引发的重绘干扰。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
user-select: none才算真正“干净”关闭 - 但要注意：如果元素内含需复制的内容（如电话号码、地址），不能整块禁用，应改用
<span></span>包裹可选文本并单独放开user-select: auto - 微信 X5 内核要求
<meta name="viewport" content="width=device-width, initial-scale=1.0">存在且不含user-scalable=no，否则可能直接忽略该样式
更可靠的做法：别只靠 -webkit-tap-highlight-color
它本质是 WebKit 私有属性，标准里不存在，未来随时可能被弃用。现代项目应以主动反馈为主，高亮控制为辅：
- 给所有交互元素加轻量
:active样式，例如&:active { transform: scale(0.98); }或opacity: 0.8 - 确保元素有
cursor: pointer（虽不影响高亮，但提升 PC 端可感知性） - 禁用高亮后，务必检查无障碍支持：键盘 Tab 焦点是否仍可见？屏幕阅读器能否识别？
- 对轮播箭头、图标按钮等无文字区域，必须提供其他视觉反馈，否则用户会怀疑点击无效
最麻烦的点在于：它既不是 bug，也不归你管——是浏览器自己决定要不要画那一层。你只能告诉它“画成透明”，而它听不听，取决于机型、内核版本、viewport 配置，甚至当前页面有没有触发可访问性模式。
