:active伪类在移动端卡顿的根本原因是300ms双击延迟和系统高亮覆盖；需设置touch-action: manipulation、仅用transform/opacity动画、禁用-webkit-tap-highlight-color、确保触控区域≥48px。
:active 伪类在移动端卡顿，不是样式写错了，而是浏览器没让它“及时动起来”——它常被 300ms 延迟拦截、被系统高亮覆盖、或因重排重绘掉帧。
为什么 :active 在真机上“点了没反应”或“闪一下就消失”
根本原因有两个：一是 iOS Safari 和多数 WebView 默认等待 300ms 判断是否双击缩放，期间不激活 :active；二是即使触发了，-webkit-tap-highlight-color 的半透明灰层会盖住你的样式，造成“视觉卡顿”。桌面 Chrome 模拟器完全不模拟这个链路，所以本地预览永远正常。
常见现象包括：button:active 在微信内置 Webview 中无变色、div 加了 :active 却毫无反馈、手指按住时颜色跳变或延迟 200ms 才出现。
必须加 touch-action: manipulation，且只加在需要点击的元素上
这个 CSS 属性不是可选项，它是告诉浏览器“别等双击、别管缩放、点完立刻执行”的开关。没有它，:active 就是裸奔状态。
- 只对具体交互元素设置，比如
.btn、[role="button"]、.card-item，不要写body { touch-action: manipulation }，否则可能意外禁用页面滚动 - iOS 9.2+、Android 4.4+ 全面支持，兼容性足够，但旧安卓 WebView（如 UC 内核）可能忽略，需 fallback
- 和
cursor: pointer无关——移动端不认这个，加了也没用
动画属性只能用 transform 和 opacity，且 transition 时间要短
:active 生命周期极短（毫秒级），过渡太长反而显得拖沓。更关键的是，改 background-color 或 box-shadow 会触发 repaint，低端安卓机明显卡顿；改 width 或 height 更会强制 layout，直接掉帧。
- 推荐写法：
.btn:active { transform: scale(0.96); opacity: 0.85; transition: transform 0.08s ease, opacity 0.12s ease; } - 必须显式声明
transform-origin: center center，避免缩放抖动 - 禁用系统高亮：
.btn { -webkit-tap-highlight-color: transparent; }，别写成* { ... }，否则表单控件会失去焦点反馈
真机调试时最容易漏掉的三件事
很多团队测完就上线，结果用户反馈“按钮点不动”，问题往往出在细节：
- 没设
min-height: 48px和min-width: 48px—— iOS 对触控区域有硬性尺寸要求，文字撑不开点击区，:active直接被忽略 - 父容器用了
pointer-events: none或overflow: hidden，触摸事件没传到目标元素，:active根本不会触发 - 用了
transform: translateZ(0)等硬件加速 hack，却意外创建了 stacking context，把:active样式层级压在了下层内容下面
复杂点在于：这些条件得同时满足才稳定——touch-action 解延迟、transform/opacity 保帧率、min-size 过尺寸关、tap-highlight-color 清干扰层。少一个，真机上就可能“看起来正常，点起来不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
