iOS Safari 中 :active 伪类仅对语义化可交互元素生效，需同时满足 role="button"、tabindex="0"、ontouchstart="" 及对应 CSS 才可靠触发；推荐用 JS 控制 is-pressed 类替代伪类以提升稳定性。
为什么 :active 在 iOS Safari 里根本没反应
不是你 CSS 写错了，是 iOS Safari 默认只对语义化可交互元素（比如 <button>、<a>）触发 :active。用 <div class="btn"> 即使加了 onclick 或 cursor: pointer，WebKit 也压根不给它建 active state stack——样式规则再对，浏览器连计算都不算。
- 现象：真机点下去毫无反馈，开发者工具里勾选
:active能看到样式生效，但运行时就是不渲染 - 根源：iOS 为省资源，默认关闭非可聚焦元素的激活态渲染路径
- 别试
touch-action: manipulation单独用——它只解决延迟，不解决“不触发”
三要素组合才是最小可靠配置
单靠一个技巧在 iOS 15.4+ 和微信/飞书内置 Webview 里大概率失效。实测必须同时满足：
- HTML 层加
role="button"+tabindex="0"（保障可访问性 & 焦点能力） - HTML 层加
ontouchstart=""（空属性，显式声明触摸意图） - CSS 层写
[role="button"]:active并配transition，且加-webkit-tap-highlight-color: transparent
漏掉任意一项，都可能在某台 iPhone 14 或定制安卓系统里完全黑屏。
用 JS 控制 is-pressed 类更稳
依赖伪类本质是把状态控制权交给浏览器，而移动端事件链太脆弱。直接接管更可控：
立即学习“前端免费学习笔记（深入）”；
- 监听
pointerdown（兼容 iOS/Android/桌面，比touchstart更统一） - 监听
pointerup和pointercancel（防止手指滑出后状态残留） - CSS 写
.btn.is-pressed { transform: scale(0.96); }，别用:active模拟 - 避免在
pointerdown里做异步操作（如fetch），否则松手时 class 还没移除
真机测试最容易忽略的细节
:active 是瞬态伪类，松手即消失——它没有持续时间，也不能被 JS 读取。如果你需要长按反馈、点击后保持高亮、或和动画节奏同步，CSS 伪类天然做不到。
- 首次触摸无反应？iOS Safari 需要一次“唤醒”，页面加载完手动点一下空白处再试按钮
- 动态插入的元素：
:active完全失效，必须手动绑定事件，不能靠 CSS 继承 -
pointer-events: none的父容器会拦截所有触摸事件，检查 DOM 树里有没有意外遮挡层
