根本原因是ios safari（12–15.6）动态插入flex项目时渲染流水线分离：先绘制无尺寸占位节点，下一帧才layout，造成视觉闪动；解决方案包括requestanimationframe+同步读取强制合并渲染、container: layout paint隔离、避免transform/filter干扰，以及设置flex-basis: 0和min-width: 0确保子项初始尺寸可控。
根本原因不是Flex本身出错，而是iOS Safari（尤其是12–15.6）在动态插入Flex项目时，先渲染未布局的空白占位，再触发layout→paint，人眼感知为闪动；加display: -webkit-flex等前缀只解决“不显示”问题，不解决“动态插入时闪烁”。
Flex容器动态插入新项目为什么会闪
浏览器在JS插入新子元素后，并不会立刻完成布局计算——它先画一个无尺寸的占位节点（常表现为0高、文字塌陷或整行跳动），等下一帧才执行layout。这个时间差在快速插入（如聊天消息、日志追加）中特别明显。
- 常见现象：
appendChild()后容器瞬间收缩再展开；React/Vue列表末尾新增项时首帧白屏或抖动 - 和
flex: 1、aspect-ratio、图片加载配合时更严重，因为这些特性都依赖layout结果才能确定尺寸 - 不是CSS写错了，是浏览器渲染流水线没把DOM插入和layout压进同一帧
用requestAnimationFrame + 同步读取强制合并渲染
让插入和布局测量发生在同一帧，避免两次paint之间的视觉断层。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 不要直接
container.append(newItem)，改用requestAnimationFrame(() => { container.append(newItem); newItem.offsetHeight; }) -
offsetHeight或getBoundingClientRect()这类读取会强制触发同步layout，浏览器只能把它和前面的append合并处理 - 如果一次插入多个节点，用
DocumentFragment批量append，再读取一次container.scrollHeight即可，别对每个节点都读 - 注意：不能在循环里反复读取，否则反而触发多次layout
给Flex容器加contain: layout paint隔离重排影响
告诉浏览器：“这个容器内部的layout变化，不会影响外部”，大幅减少滚动或动画中因插入引发的连锁重绘。
- 现代Safari（15.4+）、Chrome、Firefox均支持，无副作用，比
will-change: contents更轻量稳定 - 不要加在单个Flex item上，必须加在
display: flex的父容器上 - 兼容Safari ≤15.6？改用
backface-visibility: hidden，它也能轻量触发合成，且不影响定位逻辑 - 绝对避免在该容器或其任意父级上写
transform或filter，否则会破坏contain效果，甚至导致sticky失效
最容易被忽略的是：闪烁往往出现在“插入后立刻滚动”或“插入时刚好有图片加载完成”的瞬间——这不是单一CSS属性能解决的，必须同时控制JS插入时机、容器渲染隔离、以及子项初始尺寸（比如flex-basis: 0 + min-width: 0）。真机测试比模拟器准得多，尤其iOS 15.6之前版本对contain的支持有细微差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
