苹果手机 Safari 中点击元素出现的半透明灰色背景是 WebKit 的 -webkit-tap-highlight-color 视觉反馈机制，并非 bug；需显式设为 rgba(0, 0, 0, 0) 禁用，且须作用于可点击元素（含 label），注意兼容 iOS 辅助功能及 WebView 差异。
苹果手机点击页面元素时出现的半透明灰色背景，是 Safari 的默认 -webkit-tap-highlight-color 效果，不是 bug，但必须显式关闭才能消除。
为什么 iOS 上会有这个灰底？
这是 WebKit 内核为触摸操作提供的视觉反馈机制，用于提示用户“这里被点到了”。它只在真机 Safari 中触发，桌面 Chrome 或模拟器不会出现。该效果独立于 :active 伪类，也不受 user-select 或 pointer-events 影响。
常见错误现象包括：
- 按钮点击瞬间闪出一块不协调的灰斑，破坏设计一致性
- 列表项点击后背景色与高亮色叠加，导致文字可读性下降
- 自定义 checkbox/radio 点击区域异常触发灰底，干扰样式覆盖
用 -webkit-tap-highlight-color 彻底禁用
最直接有效的方式是将该属性设为完全透明。注意：必须作用于实际可点击的元素，不能只写在 body 或 * 上（部分旧版 iOS 不继承）。
推荐写法：
button, a, input, textarea, select, label {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
关键点：
-
rgba(0, 0, 0, 0)比transparent更可靠，某些 iOS 版本对后者支持不稳定 - 务必包含
label—— 很多表单交互通过它触发，容易遗漏 - 若使用 Vue/React 等框架，需确保样式作用域未隔离掉该规则（例如
scopedCSS 需加::v-deep或穿透写法）
为什么加了还无效？检查这三处
即使写了 -webkit-tap-highlight-color，仍可能失效：
-
meta标签里漏了user-scalable=no—— 某些 iOS 版本在缩放允许状态下会忽略该样式 - 元素设置了
pointer-events: none，但父容器又监听了事件冒泡，此时高亮会 fallback 到父级，需同步处理父级样式 - 使用了
fastclick或touch-action: manipulation，它们虽能消除 300ms 延迟，但不干预 tap 高亮；仍需单独设置-webkit-tap-highlight-color
iOS 17+ 的额外注意点
从 iOS 17 开始，系统对「弱动态效果」和「降低透明度」辅助功能的响应更敏感。如果用户开启了「降低透明度」（Settings → Accessibility → Display & Text Size → Reduce Transparency），部分旧版 CSS 可能被覆盖。此时建议：
- 避免依赖
background-clip或backdrop-filter做点击态，它们和系统级透明度控制易冲突 - 改用纯色
background-color+transition模拟点击反馈，更可控 - 测试时务必在真实设备上开启「降低透明度」再验证，模拟器无法复现该路径
真正容易被忽略的是：这个灰底在微信内置浏览器、QQ 浏览器等 WebView 中行为不一致——有些沿用 Safari 规则，有些已默认禁用。所以不要只测 Safari，上线前至少补测微信环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
