移动端webview中:active伪类延迟是因webkit为识别双击缩放引入300ms点击延迟，导致激活态样式无法即时响应；可通过空touchstart监听或touch-action:manipulation解决。
为什么移动端 Webview 中 :active 伪类有延迟
这不是 CSS 本身的问题，而是 iOS Safari（及大部分基于 WebKit 的 Webview）为识别双击缩放而引入的 300ms 点击延迟。浏览器会等这 300ms 看你是否要双击，期间不触发 :active 状态，导致按钮按下去“卡一下”才变色。
常见现象：button:hover 在桌面有效，但 button:active 在 iPhone 微信内置 Webview 或 QQ 浏览器里几乎不响应；点击后需松手才短暂闪现，或完全无反馈。
关键点：这个延迟发生在事件捕获阶段，:active 是样式层表现，它依赖底层是否真正触发了“激活态”，而 Webkit 默认把 touch 启动到样式更新之间的链路卡住了。
给 body 绑定空 touchstart 为什么能“解决”
它本质是欺骗浏览器：“用户在操作了，别等双击了”。只要页面根节点监听了任意 touchstart，WebKit 就会关闭该区域的 300ms 延迟机制 —— 这属于浏览器的兼容性兜底策略，不是标准行为，但被广泛支持。
实操建议：
- 必须用
addEventListener('touchstart', ...)，不能用ontouchstart属性绑定，后者无效 - 回调函数体可以为空，但不能省略，写成
() => {}或function(){}都行 - 只需绑定一次，且最好在 DOM 加载完成前执行（比如
<script></script>放末尾或用DOMContentLoaded） - 注意不要在 SPA 路由切换后重复绑定，否则可能堆积监听器
示例代码：
document.body.addEventListener('touchstart', function() {}, { passive: true });
{ passive: true } 很重要：避免滚动卡顿，iOS 11+ 强制要求 touch 事件监听器声明 passive，否则控制台报黄色警告，极端情况下可能被禁用。
比空 touchstart 更可靠的做法：用 touch-action CSS 属性
空 touchstart 是历史惯用 hack，现在更推荐声明式方案 —— 直接告诉浏览器“这里不需要双击缩放”，既语义清晰又无需 JS 干预。
适用场景：按钮、链接、卡片等纯操作区域
推荐写法：
- 全局禁用缩放（适合 Webapp 类页面）：
body { touch-action: manipulation; } - 局部启用（如仅按钮）：
button, .btn { touch-action: manipulation; }
manipulation 表示“允许平移和双指缩放，但禁用单指双击缩放”，刚好切中问题根源。它能让 :active 立即生效，且不影响正常滚动。
兼容性注意：touch-action 在 Android Chrome、iOS Safari 11.3+、Edge 16+ 均支持；若需兼容 iOS 9–11.2，仍需 fallback 到空 touchstart。
为什么有时候加了还是没反应？检查这几个点
不是所有“加了就灵”，容易忽略的硬性条件：
-
:active样式只对“可点击元素”生效：比如div默认不行，得加cursor: pointer或onclick属性，或者设tabindex="0" - 父容器有
overflow: hidden且子元素超出边界时，iOS Webview 可能截断 touch 区域，导致:active不触发 - 使用了 FastClick 库？它会接管 click 事件，但默认不触发
:active，需配置needFocusFn或改用touch-action - CSS 层叠问题：比如
a:active被后面定义的a:hover覆盖，用 DevTools 检查实际生效的规则
真正在意体验的话，别只押注 :active —— 它是过渡态，不可靠。按钮按下反馈应该用 touchstart/touchend 手动加 class 控制，或用 pointerdown/pointerup（更现代）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
