错误在于touch-action: pan-x在ios safari中未撑满容器时等效于auto，仍允许垂直滚动；正确做法是用pan-x pinch-zoom禁用垂直滚动，且须防父级none覆盖、旧版webview降级js方案。
touch-action 值选错会导致滑动方向冲突
常见错误是给轮播容器设 touch-action: pan-x，结果在 iOS Safari 上仍能触发页面垂直滚动。这是因为 pan-x 仅允许水平滚动，但不禁止浏览器对垂直方向的默认处理——尤其当容器高度不足、内容未撑满时，pan-x 实际等效于 auto，垂直滚动照常发生。
正确做法是明确排除不需要的方向：
-
touch-action: pan-x pinch-zoom：保留水平滑动 + 双指缩放，禁用垂直滚动和双击缩放 -
touch-action: pan-x在 Android WebView ≤ 8.1 或旧版 X5 内核中可能被完全忽略，降级为auto - 若需彻底锁死所有滚动（如自定义拖拽区域），必须用
touch-action: none，但要注意它会阻断所有后代元素的manipulation或pan-y
嵌套容器里 touch-action 会被父级覆盖
只要任意祖先节点（哪怕只是 <div id="app">）设置了 <code>touch-action: none，其所有子元素写的 touch-action: pan-y 或 manipulation 都无效。这不是 bug，是规范强制行为。
典型踩坑场景：
- Vant 或 Naive UI 初始化时给根容器加了
touch-action: none，你自己的轮播组件再写pan-x也白搭 - 轮播组件内部为防手势冲突设了
touch-action: none，结果把子项按钮的点击响应一起锁死 - 用 Chrome DevTools 的「Rendering」→「Highlight touch actions」能直观看到生效的实际值，真机测试前务必打开这个开关
滑动后首次点击失效怎么修
设了 touch-action: pan-y 后，用户滑完再点链接，第一次 click 不触发——这是浏览器为区分滑动与点击而引入的延迟机制，不是事件丢失。
不能靠加 onclick 或 addEventListener('click', ...) 解决，必须用触摸事件链判断意图：
-
touchstart时重置isSwiping = false -
touchmove中只要Math.abs(dx) > 5就设isSwiping = true（别只靠布尔值，加阈值防误判） -
touchend时若!isSwiping，调用link.click()或element.dispatchEvent(new MouseEvent('click')) - 注意：不要在
touchmove里调e.preventDefault()，否则会禁用原生滚动
iOS Safari 13.4 以下 manipulation 形同虚设
touch-action: manipulation 在 iOS Safari 12.x 和 13.0–13.3 中直接被忽略，回退到 auto，300ms 延迟照常存在。这不是兼容性 bug，是 Apple 直到 13.4 才完成实现。
实操必须做两件事：
- 用
@supports (touch-action: manipulation)包裹样式，避免低版本解析出错或干扰其他规则 - 对 iOS 12.5.7 和 13.3（仍是不少企业内网设备主力版本）降级：改用
touch-action: pan-y pinch-zoom，或加-webkit-touch-callout: none抑制长按唤出缩放菜单 - Android WebView 若用旧版 X5 内核或系统 WebView ≤ 8.1，
touch-action整体不生效，得 fallback 到 JavaScript 方案
touch-action: none 会静默覆盖所有子元素设置，且 @supports 无法检测这种运行时覆盖。必须用 DevTools 的 touch action 高亮功能逐层验证，而不是只看 CSS 文件里写了什么。
