-webkit-tap-highlight-color: transparent 是唯一关闭 iOS Safari 点击高亮的 CSS 方式，但仅对可激活元素生效，且需配合 role、tabindex、viewport 和 user-select 等条件才能在真机（尤其 iOS 15.4+ 和微信 X5）正常工作。
-webkit-tap-highlight-color: transparent 是唯一能关掉 iOS Safari 点击高亮的 CSS 方式，但它在 Android Chrome 62+ 和 Firefox 中完全无效，真机测试前必须确认目标环境。
为什么写了 -webkit-tap-highlight-color 却还有蓝灰遮罩
不是代码写错了，是它只在特定条件下生效：
- 必须作用于可激活元素：
a、button、input[type="button"]、带role="button"或tabindex="0"的div；纯onclick的div默认不触发高亮，也不响应该样式 - 不能写在伪类里（比如
a:active），必须是元素的常态样式声明 - 值只能是
transparent或rgba(0,0,0,0)；写成none、unset或任意不透明色（如#ff0000）都会失效或造成内容被完全遮盖 - 某些 iOS 版本（如 15.4+）即使设了
transparent，仍可能残留微弱灰白闪烁——这是文本可选行为引发的重绘，得配合user-select: none
哪些选择器必须显式加 -webkit-tap-highlight-color
该属性不继承，也不能用 CSS 变量控制，必须逐个写在目标元素上：
- 语义化交互元素：直接给
a、button、input[type="button"]、input[type="submit"]加 - 自定义交互容器：对绑了
click或touchstart的div.card，需同时加role="button"和tabindex="0"，再配-webkit-tap-highlight-color: transparent - 推荐组合写法（兼顾可访问性）：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] - 避免用
* { -webkit-tap-highlight-color: transparent }：部分 WebView 会异常，且影响屏幕阅读器识别焦点区域
微信 X5 内核和真机测试的隐藏依赖
微信内置浏览器（X5 内核）有强依赖，漏掉就白配：
立即学习“前端免费学习笔记（深入）”；
- 页面必须含完整
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则 X5 可能直接忽略该样式 - 桌面 Chrome 模拟器根本看不到高亮问题，等上真机才发现满屏蓝灰块
- Vue/React 动态渲染的按钮（如
v-if或useState切换出来的）若没复用父级 class 或 role，高亮会重新出现 - 用了 FastClick 或类似库时，“高亮消失”不是因为 CSS 生效了，而是事件机制被绕过；此时若要自定义反馈，得改用
pointerdown/pointerup监听
替代方案比硬关更可靠
依赖 -webkit-tap-highlight-color 越来越不可靠，现代项目应转向主动反馈：
-
:active不能替代它——触发时机不同、持续时间极短（iOS 常低于 100ms），且容易因滑动中断 - 推荐用
:active+transform: scale(0.98)或轻微background变化模拟压感，但需搭配transition控制响应 - 更健壮的做法是放弃“彻底消灭”，改用
:focus-visible+outline统一管理焦点反馈，对触控设备用@media (hover: none) and (pointer: coarse)单独处理 - 真正该控制的是反馈形式，不是是否显示——视障用户依赖焦点轮廓，强行抹掉反而损害可访问性
最常被忽略的是：iOS 15.4+ 的残影不是样式没生效，而是 user-select: none 没同步加；而微信 X5 下 viewport 缺失会导致整个规则静默失效。这两个点不上真机根本发现不了。
