白屏是因旧版iOS Safari（≤12.1）完全忽略或解析崩溃Flex布局：display: flex被跳过致容器退化为block，若父容器高度依赖flex: 1拉伸则塌陷为0，引发白屏；须双写display（-webkit-box/-webkit-flex/flex）并严格排序，flex: 1需拆解为1 1 0px且配min-height: 0，gap等属性须手动降级。
白屏不是 CSS 加载失败，而是 Flex 布局在旧版 iOS Safari（尤其是 iOS 8–12.1）中被完全忽略或解析崩溃导致的渲染中断——display: flex 被跳过，容器退化为 display: block，但若父容器高度依赖子项弹性拉伸（比如全屏布局 + flex: 1），就会塌陷成 0 高度，最终白屏。
为什么 iOS ≤12.1 会白屏而不是错位
根本原因不是样式没生效，而是部分旧内核（如 iOS 9.3 的 WebKit 601.1.46）在遇到未识别的 Flex 属性时会静默丢弃整个声明块，甚至阻断后续 CSS 解析。常见触发点：
-
flex: 1出现在无明确高度的父容器里 → Safari 把它当非法值，连带忽略整条规则 - 混用
display: -webkit-flex和display: flex顺序错误（flex写在前面）→ 旧内核直接跳过所有后续 Flex 相关声明 - 用了
gap或flex-wrap: wrap-reverse→ 这些属性在 iOS 14.1 以下压根不解析，某些版本会因此卡住渲染流水线
必须双写 display 并严格控制声明顺序
只写 display: -webkit-flex 不够，只写 display: flex 更糟。iOS 8 只认 -webkit-box，iOS 9–12.1 才开始支持 -webkit-flex，但两者不能共存于同一行。正确写法是：
.container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
- 顺序不可调换：老内核按从上到下匹配，先命中就停；
-webkit-box必须在最前，否则 iOS 8 直接白屏 - 不要用
display: -webkit-flex !important—— iOS 9 会因优先级冲突拒绝解析整条规则 - 如果项目需支持 iOS 7–8，
-webkit-box是唯一可靠方案，且必须配套-webkit-box-orient和-webkit-box-pack
flex: 1 在 iOS 中必须拆解并配 min-height: 0
flex: 1 在 iOS 9–12.1 会被错误解析为 flex-basis: auto，触发默认 min-height: auto，导致子项拒绝拉伸、高度坍缩为 0 —— 这是白屏最常见原因。
立即学习“前端免费学习笔记（深入）”；
- 改用显式三值写法：
-webkit-flex: 1 1 0px+flex: 1 1 0px（注意是0px，不是0%或0） - 必须加
min-height: 0（垂直布局）或min-width: 0（水平布局），否则 Safari 仍按内容撑高 - 若子项含图片或文字，还要加
box-sizing: border-box，防止 padding/border 触发隐式最小尺寸保护
gap 和 justify-content: space-between 的降级陷阱
gap 在 iOS ≤14.1 完全无效，@supports (gap: 0) 检测不可靠（Safari 14.1 会误报支持）。而 justify-content: space-between 在 iOS 7–9 中常因父容器未设宽度或含 padding 导致偏移，严重时引发重排失败、白屏。
-
gap必须手动降级：容器设margin: -8px，子项设margin: 8px，且每个子项加min-width: 0和box-sizing: border-box -
space-between改用-webkit-box-pack: justify（iOS 8–9）+-webkit-justify-content: space-between（iOS 10–12.1），并确保父容器有明确width或max-width - 避免用
:not(:first-child)清除首项 margin —— iOS 8 不支持该伪类，会导致样式错乱甚至白屏，改用:nth-child(n+2)
真正容易被忽略的是：白屏往往发生在混合环境里——比如一个页面同时用了 display: -webkit-box（按钮内部）和 display: -webkit-flex（外层容器），旧内核会因模型切换混乱而放弃渲染。兼容不是加前缀，而是做模型隔离：对关键区域（如全屏容器）强制统一用 -webkit-box，其余区域再渐进增强。
