iOS Safari 仅支持半透明色值设置 -webkit-tap-highlight-color，如 rgba(255,0,0,0.3)，纯色或不透明色会被忽略；更可靠的方式是用 :active + CSS 变量 + transition 模拟反馈，并配合 touch-action: manipulation 消除延迟。
移动端点击高亮颜色为什么不能直接用 -webkit-tap-highlight-color 覆盖？
因为 iOS Safari（包括所有基于 WebKit 的 iOS 浏览器）只允许对 -webkit-tap-highlight-color 设置半透明色值，纯色或不透明色会被忽略——比如设成 red 或 rgba(255,0,0,1) 实际无效，必须带 alpha 且小于 1，例如 rgba(255,0,0,0.3) 才生效。
常见错误现象：写了 -webkit-tap-highlight-color: #ff0000; 却没反应，不是语法错，是浏览器主动丢弃了这个声明。
- 仅支持 WebKit 内核，Chrome Android、Firefox Android 完全不识别该属性
- 无法控制高亮形状（始终是矩形）、延迟、动画时长
- 若页面启用了
user-select: none或pointer-events: none，高亮可能被意外抑制
用 CSS 变量 + :active 模拟可控触摸反馈更可靠
真机上最稳定的方式是绕过系统高亮，自己用 :active 配合 background-color 或 box-shadow 做视觉反馈，再用 CSS 变量统一管理颜色。
使用场景：按钮、卡片、导航项等需要明确“已按下”状态的交互元素。
立即学习“前端免费学习笔记（深入）”；
button {
--tap-color: rgba(0, 120, 255, 0.1);
transition: background-color 0.15s ease;
}
button:active {
background-color: var(--tap-color);
}
/* 全局覆盖时可写在 :root */
:root {
--tap-color: rgba(255, 64, 64, 0.12);
}- 必须加
transition，否则:active状态切换生硬，像卡顿 - 避免用
opacity做反馈——会透出下层内容，尤其在滚动容器里容易错位 - Android Chrome 对
:active的触发有约 300ms 延迟（除非已启用touch-action: manipulation）
touch-action: manipulation 是提速关键，但别乱加
它告诉浏览器：“这个区域只做点击/滑动，不用等 300ms 判定是否双击”，能消除 :active 延迟，也能让 -webkit-tap-highlight-color 更快响应。
性能影响：开启后，该元素内双击缩放、长按选中文本等功能失效，所以只应加在明确无文本选择需求的控件上。
- 适用：
button、a（跳转用）、自定义div按钮 - 禁用：
p、article、含可复制文本的容器 - 兼容性好，iOS 9.2+、Android 4.4+ 均支持
真机调试时最容易被忽略的点
开发时在桌面 Chrome 模拟移动设备，:active 状态几乎不触发——因为没真实 touch 事件。必须连真机调试，或用 Safari 的「Responsive Design Mode」并勾选「Simulate Touch Events」。
- iOS 上，如果父容器有
overflow: hidden且子元素超出，:active可能不触发（WebKit bug，需加transform: translateZ(0)强制硬件加速修复） - CSS 变量名别用
--highlight这类太泛的，建议带作用域如--btn-tap-bg，避免被第三方样式意外覆盖 - 不要试图用 JS 监听
touchstart来加 class 模拟 active——增加复杂度且易漏掉touchcancel清理逻辑
