iOS 上 tap-highlight-color 失效是因为 WebKit 仅对原生可交互元素（如 、）支持，普通元素需添加 cursor: pointer 或 touch-action: manipulation 并配合 role="button"、user-select: none 等才能生效。
tap-highlight-color 为什么在 iOS 上失效
因为 Safari 移动版默认只对 <a></a> 和 <button></button> 这类原生可交互元素响应 tap-highlight-color，普通 <div> 或自定义组件加了 <code>onclick 也不行——这不是 bug，是 WebKit 的安全策略：防止误触高亮干扰非交互区域。
- 必须给元素添加
cursor: pointer或touch-action: manipulation才可能触发 - iOS 15.4+ 开始，
tap-highlight-color对非可聚焦元素彻底禁用，仅保留对focusable元素的支持 - 如果用了
preventDefault()在touchstart里，高亮会直接被掐掉，连带影响点击穿透逻辑
怎么让 tap-highlight-color 生效且不破坏体验
核心不是“怎么加颜色”，而是“怎么让浏览器承认这是可点区域”。最稳妥路径是组合声明：
- 给目标元素加
role="button"（语义化 + 触发可聚焦） - 设置
user-select: none（避免长按唤出文字选择菜单） - 显式声明
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.2)（注意前缀不能省） - 补上
touch-action: manipulation（告诉浏览器“这里只做点击，别缩放/滚动”）
示例：
.card-item {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
touch-action: manipulation;
user-select: none;
}
替代方案：tap-highlight-color 不可用时怎么办
当遇到 WebView 内核老旧、或需要兼容 Android Chrome 旧版本（tap-highlight-color 支持不稳定），就得绕开它：
立即学习“前端免费学习笔记（深入）”；
- 用
:active伪类 +transition模拟点击反馈，但需确保元素有position: relative或触发层叠上下文，否则动画可能被裁剪 - 监听
touchstart/touchend动态加 class，注意要防 touchcancel 干扰状态 - 避免在
touchstart里直接改背景色——部分 Android 机型存在 300ms 延迟导致视觉卡顿
容易被忽略的兼容性细节
很多团队测完 iOS 就上线，结果在 Samsung Internet 或 KaiOS 上发现高亮全无，原因很具体：
-
-webkit-tap-highlight-color是 WebKit 专属，Firefox Android / Chromium Android 不支持（它们走自己的highlight机制） - Android 12+ 的 WebView 默认禁用 tap highlight，除非页面明确声明
viewport含user-scalable=no（但这又牺牲可访问性） - 使用
will-change: transform的元素，某些 Android 版本会跳过高亮渲染，属于 GPU 合成层的副作用
真正在意触摸反馈的一致性，得把 tap-highlight-color 当作 iOS 专属微调项，其他平台靠 :active 或 JS 状态驱动更可靠。
