ios flex子项点击穿透根本原因是position:fixed/transform/filter触发独立合成层，使touchstart与click事件分属不同图层；滚动卡顿源于height:auto、flex嵌套过深及overflow:hidden截断上下文；touchmove必须显式声明passive:true；contain:layout仅对直接子项生效。
为什么iOS上Flex子项会点击穿透
根本原因是事件捕获链被破坏：当父容器用了position: fixed、transform或filter，iOS Safari 会创建独立合成层，导致touchstart在上层触发后，click却落到下层——尤其常见于弹窗关闭瞬间。FastClick这类库还会加剧问题，因为它把touchend转成click，而iOS对合成层间事件冒泡处理不一致。
关键判断点：不是所有点击穿透都来自JS库，纯CSS也能触发。比如一个display: flex的弹窗容器加了backdrop-filter: blur(10px)，它本身就会隔离事件流。
- 验证方式：DevTools → “Rendering” 面板勾选 “Layer borders”，穿透发生时，上下两层常显示为分离图层
- 临时规避：给弹窗父级加
pointer-events: none，再给可点子项单独设pointer-events: auto - 根治写法：禁用
backdrop-filter和filter；若必须模糊，改用image-rendering: -webkit-optimize-contrast模拟（仅视觉近似）
Flex容器滚动卡顿的三大硬伤
iOS Safari 对 Flex 滚动的容忍度极低，卡顿往往不是“没优化”，而是踩中了三个默认行为陷阱：
-
height: auto或flex: 1撑开的滚动容器，iOS 无法确定scrollHeight，直接禁用惯性滚动上下文 - Flex 嵌套超三层（如
.list → .item → .content → .text），Layout 阶段超 16ms，滚动帧率断崖式下跌 - 父级用了
overflow: hidden或position: fixed，截断滚动上下文，子容器overflow: scroll彻底失效
实操建议：max-height: 100dvh替代height: 100vh（防地址栏展开跳变）；Flex 容器加min-height: 0；中间层一律降级为div，用gap控制间距。
touchmove监听必须带passive: true
这是最常被忽略、效果却最直接的一环。iOS Safari 默认把touchmove视为可能调e.preventDefault()的阻塞事件，不显式声明{ passive: true }，滚动手势会同步等待 JS 执行完毕——哪怕 handler 是空函数，帧率也会从 60fps 掉到 20fps 以下。
错误写法：el.addEventListener('touchmove', handler)
正确写法：el.addEventListener('touchmove', handler, { passive: true })
- 如果真需要阻止默认行为（如拖拽排序），改用
touchstart+e.preventDefault()，并在touchmove里保持passive: true - 检查第三方 UI 库（如某些 React 组件）是否偷偷绑了未声明
passive的touchmove，用 DevTools → “Event Listeners” 面板过滤确认 - 滚动容器本身也要监听
scroll并加{ passive: true }，否则滚动结束后的回弹动画可能卡住
contain: layout只对直接子项生效
很多人以为给 Flex 容器加contain: layout就能隔离重排，但 iOS Safari 只认它的**直接子项**。如果子项内部还有 Flex 嵌套，重排照样扩散。
典型翻车场景：.card是 Flex 容器，加了contain: layout，但它里面的.avatar又是个display: flex图标容器——这个内层 Flex 仍会触发外层重排。
- 正确用法：把
contain: layout加在.card的子元素（如.card-content）上，且该子元素不能再是 Flex 容器 - 搭配
will-change: scroll-position（仅 iOS 15+ 有效），但别滥用——加在滚动容器上即可，别扩散到每个列表项 - 安卓 WebView 不支持
contain，需配合translateZ(0)做 fallback，但 iOS 15+ 已不推荐
复杂点在于：这些限制不是互斥的，而是叠加生效。删掉-webkit-overflow-scrolling: touch只是起点，真正卡顿往往藏在min-height: 0漏写、passive忘传、或contain加错层级里。动手前先打开 DevTools 的“Layer borders”和“Layout Shift Regions”，看一眼图层和重排范围，比猜更准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
