touch-action: pan-y 在 ios safari 中常失效，是因为它仅在满足三条件的可滚动容器上生效：容器需有明确高度且内容溢出、必须设 overflow-y: auto/scroll、所有祖先节点不能设 touch-action: none 或更窄限制；且 ios 16.4 前不支持 body/html 元素。
touch-action 在 iOS Safari 中不是“不兼容”，而是有明确生效边界：只在可滚动容器上对 pan-x/pan-y 生效，manipulation 需 iOS 13.4+，且父级设置会彻底压制子级——加错位置等于没加。
为什么 touch-action: pan-y 在 iOS 上经常失效
它根本不会在 body 或 html 上生效，iOS Safari 直到 16.4 才允许在非按钮类元素上使用该值，且仅当目标容器满足三个硬性条件：
- 容器必须有明确高度（不能是
height: auto）且内容实际溢出（scrollHeight > clientHeight） - 必须作用于带
overflow-y: auto或scroll的具体滚动容器，而非外层布局 wrapper - 所有祖先节点（包括轮播组件、弹窗遮罩、UI 框架根容器）都不能设
touch-action: none或更窄的限制（如pan-x）
常见错误：给 .list 加 touch-action: pan-y，但它的父级 .page 是 UI 框架初始化时注入的 touch-action: none —— 子元素声明直接被忽略。
touch-action: manipulation 在 iOS 12–13.3 完全不生效
这个值从 iOS Safari 13.4 才开始被完整支持；13.0–13.3 和全部 12.x 版本会直接忽略它，回退到 auto，300ms 延迟照常存在。这不是 bug，是实现滞后。
- 必须用
@supports (touch-action: manipulation)包裹样式，避免低版本解析异常或干扰其他规则 - 对 iOS 12.5.7 / 13.3 这类仍活跃的企业内网设备，需降级方案：
touch-action: pan-y pinch-zoom（保留双指缩放）或引入fastclick - 禁用长按菜单可补一层：
-webkit-touch-callout: none，虽不解决延迟，但能减少误触发
父容器 touch-action: none 会锁死所有子元素手势
CSS 的 touch-action 不支持子级覆盖父级，只要任意祖先节点（哪怕只是 div#app）设了 touch-action: none，其所有后代即使显式写 touch-action: manipulation 也无效。
- 典型场景：Vant/Naive UI 初始化时给根容器设
touch-action: none；轮播组件内部为防滑动冲突加了该值，结果把子按钮的点击响应也锁死了 - 排查方法：用 Safari DevTools 的「Rendering」→「Highlight touch actions」，一眼看出哪块区域实际生效的是哪个值
- 修复方式：要么重置父级为
touch-action: pan-y（如果它本身需要滚动），要么把可点击元素移出该容器作用域
viewport 配置会覆盖 touch-action 行为
touch-action: manipulation 默认禁用双击缩放，但它和 viewport 元标签是强耦合的——若 <meta name="viewport"> 中写了 user-scalable=no 或缺失 initial-scale=1.0，Safari 会直接忽略 touch-action 的部分语义。
- 必须配齐：
width=device-width, initial-scale=1.0, maximum-scale=1.0；maximum-scale=1.0比user-scalable=no更可靠 - 禁止 JS 动态修改
<meta name="viewport">的content属性——Safari 不支持运行时重载 - 检查是否有多余的 viewport 标签（如构建工具自动注入 + 手动写了一份），Safari 只认第一个
真正麻烦的从来不是属性本身，而是你无法靠“全局加一遍”解决问题——每个可点击区域都要单独判断它所处的 DOM 层级、祖先约束、滚动上下文和系统版本支持范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
