ios safari点击按钮出现灰色遮罩是浏览器原生“点击高亮反馈”，需用-webkit-tap-highlight-color: rgba(0,0,0,0)禁用，并配合outline: none及精准选择器覆盖可点击元素。
iOS Safari点击按钮出现灰色遮罩是怎么回事
这是 Safari 的默认行为，叫“点击高亮反馈”，用来给用户视觉确认点了哪里。它和 :active 伪类无关，也不是 CSS 动画或 transition 导致的，而是浏览器原生层叠加的一层临时蒙版。
设置 -webkit-tap-highlight-color: transparent 为什么有时无效
常见失效原因不是写法错，而是没覆盖到触发节点本身，或者被更高优先级样式压制：
- 必须作用在**实际可点击的元素上**（比如
<button></button>、<a></a>、带onclick的<div>），父容器设了没用 <li>不能只写在 <code>button选择器里——如果按钮是<input type="button">，得单独加input[type="button"] - 某些 iOS 版本（尤其是 iOS 15.4+）对
transparent响应不一致，改用rgba(0,0,0,0)更稳 - 如果按钮有
border-radius且值较大，高亮区域可能仍显示圆角边缘，需配合-webkit-tap-highlight-color: rgba(0,0,0,0)+outline: none - 务必加在所有可能被点的交互元素上：
button,a,input[type="submit"],[role="button"],[tabindex] - 避免用
!important，但可以用更具体的选择器，比如.btn-primary:active后补一句-webkit-tap-highlight-color: rgba(0,0,0,0) - 部分低版本 iOS（如 9.x）不支持
transparent，只认rgba()或十六进制色值，所以统一写成rgba(0,0,0,0)最保险 - 加
outline: none只对键盘 focus 有效，对触屏 tap 不起作用，所以它要和-webkit-tap-highlight-color配合使用 - 若需保留键盘可访问性，改用
outline: 2px solid transparent+&:focus-visible条件触发真实 outline - 注意：iOS 上
:focus在纯触屏操作中几乎不会触发，所以outline: none实际影响很小
兼容老 iOS 和微信内置浏览器的写法
微信 iOS 客户端用的是 UIWebView 或旧版 WKWebView，对 -webkit-tap-highlight-color 支持更敏感，也更容易漏掉：
别忘了禁用默认 focus 样式干扰
点击后如果按钮获得焦点，Safari 还会加一圈蓝色 outline（尤其在表单按钮上），这和 tap highlight 是两码事，但容易被当成同一个问题：
立即学习“前端免费学习笔记（深入）”；
