touch-action: manipulation 在 ios safari 13.4 前完全不生效，是因 safari 实现滞后而非 bug；12.x 和 13.0–13.3 版本直接忽略该值回退为 auto，300ms 延迟仍存在；需用 @supports 包裹、降级为 pan-y pinch-zoom 或 -webkit-touch-callout: none，并注意父级 touch-action: none 会强制覆盖子元素设置。
touch-action: manipulation 在 iOS Safari 13.4 之前完全不解析
这不是 bug，是 Safari 实现滞后——iOS Safari 直到 13.4 才开始完整支持 touch-action: manipulation。12.x 和 13.0–13.3 版本会直接忽略该声明，回退为 touch-action: auto，300ms 点击延迟照常存在。
实操建议：
- 用
@supports (touch-action: manipulation)包裹样式，避免低版本误解析或干扰其他规则 - 真机测试必须覆盖 iOS 12.5.7 和 13.3 —— 这两个仍是部分企业内网设备主力版本
- 降级方案：对旧版改用
touch-action: pan-y pinch-zoom（保留滚动+双指缩放），或加-webkit-touch-callout: none抑制长按唤出缩放菜单
父容器 touch-action: none 强制覆盖子元素设置
CSS 的 touch-action 不支持子元素“覆盖”父级设置。只要祖先节点（哪怕只是 div#app）设了 touch-action: none，其所有后代即使显式写 touch-action: manipulation 也无效。
常见错误场景：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- UI 框架（如 Vant、Naive UI）初始化时给根容器设了
touch-action: none，你自己的按钮加了manipulation白加 - 轮播组件内部用了
touch-action: none防止滑动冲突，结果把子按钮的点击响应也锁死了 - 用 Chrome DevTools 的「Rendering」面板勾选 Highlight touch actions，能一眼看出哪块区域实际生效的是哪个值
作用于 body/html 标签在 iOS Safari 16.4 之前无效
iOS Safari 明确不支持在 或 上设置 touch-action。哪怕写了 body { touch-action: pan-y; }，浏览器也当没看见 —— computed 样式里该属性会显示为灰色禁用状态。
必须把样式移到实际滚动容器上，比如一个带 overflow-y: auto 的 <div class="scroll-container">，并确保：
<ul>
<li>容器内容真实溢出（<code>scrollHeight > clientHeight），否则 touch-action 不会被激活
computed touch-action 值，避免某层父级设了 pan-x 或 none 截断触摸流touch-action: pan-x，它们很可能包裹了你的滚动区域Android WebView 中 touch-action 被忽略的典型原因
不少 Android App 内嵌 WebView（尤其旧版 X5 内核、系统 WebView ≤ Android 8.1）根本不解析 touch-action，哪怕写了也当没写。这时延迟不会消失，manipulation 形同虚设。
此时只能靠 JS 兜底：
- 监听
document.documentElement的gesturestart和touchstart事件 - 当
event.touches.length > 1时调用event.preventDefault()（注意传{ passive: false }） - 双击缩放需缓存时间戳，拦截间隔 ≤ 300ms 的第二次
touchend
html, body { height: 100vh; }），iOS Safari 就会自动启用双指缩放查看溢出区 —— 此时 touch-action 也救不了。
