Safari 仍 flat 渲染是因为缺少 perspective（必须与 transform-style: preserve-3d 同元素设置）、中间父级未设 preserve-3d 导致断层、或存在 overflow: hidden/filter 等中断 3D 流程的属性。
为什么加了transform-style: preserve-3d Safari 还是 flat 渲染？
不是 Safari “不支持”，而是它对 3D 渲染上下文的建立条件更严格——漏掉任意一个必要环节，就会直接退化为 flat。Chrome 可能“看起来动了”，但 Layers 面板里看不到透视网格线，说明底层已降级。
-
transform-style: preserve-3d必须写在**直接父容器**上，不能靠继承；孙子级元素的 3D 变换，中间父级没设就断层 - 该父容器**必须同时有非
none的transform**，哪怕只是transform: translateZ(0)—— Safari 不会为纯样式声明启用 3D 上下文 - 父容器不能带
overflow: hidden、filter、opacity: 0.99等会创建新层叠上下文且中断 3D 流程的属性 - iOS Safari（尤其 15.4 前）对
position: fixed或will-change: transform+preserve-3d组合极度敏感，会强制关闭整个 3D 渲染
为什么 perspective 加了还是没深度感？
perspective 不是可选修饰，它是 Safari 启动 3D 渲染流程的硬性开关。没有它，translateZ() 和 rotateY() 全部变成数学平移/旋转，所有 Z 值被拍平到同一平面。
-
perspective必须和transform-style: preserve-3d写在**同一个元素**上，不能写在子元素或 body 里 - 值太小（如
perspective: 50px）会导致翻转“炸开”，遮挡错乱；太大（如perspective: 5000px）接近正交投影，Z 差异不可见 - 移动端推荐起始值：
perspective: 600px；桌面端：perspective: 1000px；真机调试时微调 - iOS 旧版需加前缀：
-webkit-perspective: 600px，仅写标准属性可能无效
为什么翻转时闪屏、穿模、背面消失？
backface-visibility: hidden 是解决 Safari 闪屏最直接有效的操作，但它不是独立生效的——必须和 preserve-3d + perspective 协作，三者缺一不可。
- 必须加在「正在执行
transition或animation」的元素自身上，比如.card-front和.card-back都要单独加 - 加在父容器上完全无效，因为该属性不继承，Safari 也不会因此为子元素创建稳定合成层
- 如果元素真要显示背面（如翻转后），背面元素必须设为
backface-visibility: visible，否则内容空白 - 别混用
transform: translateZ(0)和backface-visibility: hidden—— iOS 16+ 中后者可能干扰图层决策
为什么 DevTools 里看不出问题，真机却白屏或卡顿？
Safari 的 DevTools 模拟器常掩盖真实渲染路径。iOS 真机（尤其低配机型）会因内存或驱动限制，在检测到不规范组合时直接跳过 3D 渲染，返回空白或 fallback 样式。
立即学习“前端免费学习笔记（深入）”；
- 务必在真机上用 Safari 连接 Web Inspector 调试，观察 Layers 面板是否出现带透视网格线的图层框
- 避免嵌套过深：超过 3 层
preserve-3d容器会显著增加合成层开销，iOS 容易触发降级 - 不要给文字元素本身加
transform或backface-visibility: hidden—— 它们极易被拉进 GPU 图层导致模糊，应隔离在isolation: isolate容器内 - 旧版 iOS（如 14.x）只认
-webkit-transform-style: preserve-3d，漏掉前缀就是失效
