Safari 中 touch-action 失效主因是未作用于真正可滚动容器：iOS 16.4 前不支持 body/html；需设于 overflow-y:auto 且内容溢出的 div 等元素，并排除父级 touch-action:none 截断。
touch-action 在 Safari 中不是“失效”，而是没满足它严格生效的条件——最常见原因是写在了 body 或 html 上，或目标容器根本不可滚动。
为什么 touch-action 写在 body/html 上完全不生效
iOS Safari 直到 16.4 才开始支持 touch-action，且明确禁止在 body 和 html 元素上设置该属性。DevTools 里你会看到 computed 样式中 touch-action 是灰色禁用状态，浏览器直接忽略整条声明。
必须把样式移到实际滚动容器上，比如一个带 overflow-y: auto 的 <div class="list"> 或 <code><section class="scroll-area"></section>。
- 检查元素是否是
body或html：如果是，立刻移走 - 确认目标容器有显式高度（如
height: 400px）且内容溢出（scrollHeight > clientHeight） - 临时加
border: 2px solid red看内容是否撑出容器边界
容器设置了 pan-y 却仍无法纵向滚动
touch-action: pan-y 只在“可滚动容器”上激活响应逻辑。如果容器内容没溢出、或者父级用了 touch-action: none，它就形同虚设。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 确保容器有
overflow-y: auto或scroll，且scrollHeight > clientHeight - 逐级向上检查父元素的 computed
touch-action值，避免被none或pan-x截断 - 轮播图、弹窗遮罩层等第三方组件常自带
touch-action: pan-x，它们很可能包裹了你的列表区域 - 若父级限制太严，可在其上显式覆盖为
touch-action: pan-y（需保证不影响自身交互）
touch-action: manipulation 后双击/捏合缩放没了
这不是 bug，是规范行为。touch-action: manipulation 明确禁用双击和 pinch-zoom，只保留 tap 和 pan。它等效于 pan-x pan-y，但不含 pinch-zoom。
- 若需缩放，请改用
touch-action: pinch-zoom，并配<meta name="viewport" content="user-scalable=yes"> -
touch-action: manipulation必须作用于具体可点击元素（如button、a、[role="button"]），不能写在body或通配符上 - 配合
-webkit-tap-highlight-color: transparent才能完整消除延迟与高亮 - 某些辅助功能开启时（如“减少运动”），Safari 会弱化或忽略该值，真机测试不可跳过
最容易被忽略的是：**容器是否真正可滚动，比写对值更重要**。Safari 不会为你“兜底”，它只在满足条件的节点上执行规范，其余一律静默跳过。调试时优先看 computed 样式里的 touch-action 是否为有效值，而不是反复改 CSS 规则。
