-webkit-tap-highlight-color 仅在 iOS Safari（含微信）对 <a> 或 tabindex 元素生效，需带前缀且不能写在伪类中；禁用后须手动添加 :active 样式（推荐 transform: scale），而 touch-action: manipulation 是更优、跨平台的替代方案。
tap-highlight-color 在 iOS Safari 上根本不起作用？
不是你的写法错，是它只对 <a> 和可聚焦元素生效，且仅在 iOS Safari（含微信内置浏览器）中有效。Android Chrome、Firefox 完全忽略这个属性，连警告都不报。
常见错误现象：div 加了 tap-highlight-color: transparent 却仍有灰色点击蒙层；或者写了但没加 -webkit-tap-highlight-color 前缀，直接被忽略。
- 必须带
-webkit-前缀，标准属性名tap-highlight-color无效 - 目标元素需满足：有
href属性的<a>，或设置了tabindex（如tabindex="0"）的<div>等 - 不能写在伪类里（比如
:active），必须作用于元素本身 - 值设为
transparent最稳妥；rgba(0,0,0,0)在部分旧版 iOS 会退化为黑色
为什么禁用 tap highlight 后按钮点击没反馈了？
禁用 -webkit-tap-highlight-color 只是去掉系统默认的半透明高亮层，不等于提供点击态。很多开发者误以为“关掉就完事”，结果用户点不动、没感知。
真实使用场景：你正在做一个自定义按钮组件，希望用 :active 改背景色或缩放，但系统高亮层盖在上面，导致视觉冲突或延迟响应。
立即学习“前端免费学习笔记（深入）”；
- 必须手动补
:active样式，且推荐用transform: scale(0.98)而非改背景色——更轻量，避免重排 - 注意
:active在 iOS 上触发有约 300ms 延迟，若已引入fastclick或启用viewport的touch-action，需同步检查是否干扰 - 别对整个
body统一设-webkit-tap-highlight-color: transparent，会干掉所有链接的默认反馈，无障碍体验受损
替代方案：touch-action 比 tap-highlight-color 更可控
如果你真正想解决的是“点击卡顿”或“滑动时误触发点击”，touch-action 是更底层、更可靠的开关。
性能影响明显：禁用高亮只是视觉优化，而 touch-action: manipulation 能让浏览器跳过双击缩放检测，直接响应单次触摸，消除 300ms 延迟。
-
touch-action: manipulation等价于pan-x pan-y pinch-zoom，允许滚动和缩放，但禁用双击、长按等复杂手势 - 它在 iOS Safari、Chrome Android、Edge 全平台支持，兼容性远超
-webkit-tap-highlight-color - 对按钮类元素单独设置即可，比如
button { touch-action: manipulation; }，不影响页面其他区域行为 - 注意：设了
touch-action: none会彻底禁用所有触摸交互，慎用
真机调试时发现高亮颜色变浅或偏移？
这是 iOS 渲染管线的合成策略导致的：当元素有 transform、opacity 或 will-change 时，高亮层可能被绘制在不同图层，出现颜色失真或定位偏移。
最容易被忽略的地方：你可能在父容器上写了 transform: translateZ(0) 强制硬件加速，却没意识到它也会影响子元素的 tap highlight 渲染位置。
- 优先用
touch-action替代高亮控制，绕过渲染层问题 - 如果必须保留高亮，避免在触发元素或其任意祖先上使用
transform或opacity < 1 - 微信 WebView 对
-webkit-tap-highlight-color的解析更不稳定，建议在该环境强制 fallback 到:active + scale
