-webkit-tap-highlight-color必须作用于具体可点击元素而非body或*，因其不继承；仅对a、button等语义可激活元素或带role="button"/tabindex="0"的容器生效，且需真机验证。
直接设 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 就能关掉，但必须作用在可点击元素上，且真机验证才靠谱。
为什么 -webkit-tap-highlight-color 必须写在具体元素上
这个属性不继承，body 或 * 上设了，子元素不会自动获得。iOS Safari 只对“语义可激活元素”触发高亮，比如 a、button、input[type="button"]，还有带 role="button" 和 tabindex="0" 的自定义容器。
常见遗漏点：
-
label元素常被忽略，但它能触发input的点击，必须包含 - Vue/React 动态渲染的按钮，若没同步
role或tabindex，样式会失效 - 用
div绑onclick却没加role="button"，规则压根不匹配
推荐选择器：a, button, input, textarea, select, label, [role="button"], [tabindex="0"]
transparent 和 rgba(0, 0, 0, 0) 选哪个
rgba(0, 0, 0, 0) 更稳妥。部分 iOS 版本（尤其是 iOS 15.4+ 和某些微信 X5 内核）对 transparent 支持不稳定，可能残留微弱灰斑；而 rgba(0, 0, 0, 0) 明确指定 alpha=0，在所有已知 WebKit 环境中都可靠。
绝对不能写：none、unset、initial、rgba(255,255,255,0)——这些值全部无效。
为什么加了还看到灰底？检查这三个地方
不是代码错，而是环境或配置干扰：
-
里漏了user-scalable=no，某些 iOS 版本在允许缩放时会跳过该样式 - 元素本身设了
pointer-events: none，但父级监听了冒泡事件，高亮会 fallback 到父级，得同步处理父级 - 用了
fastclick或touch-action: manipulation，它们只解决 300ms 延迟，不干预高亮，仍需单独配-webkit-tap-highlight-color
桌面 Chrome 模拟器默认不触发 tap 高亮，开发阶段完全看不到问题——必须用真机 Safari 测试。
iOS 17+ 开启「降低透明度」辅助功能后怎么办
系统级透明度控制会覆盖部分 CSS 行为。如果用户开启了「设置 → 辅助功能 → 显示与文字大小 → 降低透明度」，-webkit-tap-highlight-color 可能被绕过，或导致背景色异常叠加。
此时更可靠的做法是：
- 放弃依赖透明层反馈，改用纯色
background-color+transition模拟点击态 - 避免用
backdrop-filter或background-clip做点击反馈，它们和系统透明度控制易冲突 - 确保
:active样式存在（哪怕只是transform: scale(0.98)），因为关掉高亮后，这是唯一能被肉眼捕捉到的即时反馈
真正难处理的从来不是加一行 CSS，而是关掉系统默认反馈后，你得自己把视觉响应做对、做及时、做无障碍兼容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
