Safari 3D 渲染需严格满足：父链连续设 transform-style: preserve-3d、每个翻转元素单独设 backface-visibility: hidden、perspective 与 preserve-3d 同级且加 -webkit- 前缀、子元素必须有非空 transform，否则 Z 轴排序退化为平面渲染。
因为 Safari 对 3D 渲染上下文的校验极严，只要父链中断、backface-visibility 缺失、或 transform 声明顺序错误，Z 轴排序就立刻退化为平面渲染，导致视觉上“穿透”其他元素。
transform-style: preserve-3d 父链必须连续
Safari 不会宽容地“推测”3D上下文。一旦某个中间父容器漏设 transform-style: preserve-3d，或被 CSS 重置库（如 normalize.css 或某些 UI 框架）悄悄覆盖为 transform-style: flat，子元素的 translateZ() 就直接失效——Z 值被归零，所有元素挤在同一平面，谁在 HTML 里靠后、谁的层叠上下文更强，谁就盖住别人，和预期 3D 深度完全无关。
- 检查方式：用 Safari 开发者工具选中穿模元素 → Styles 面板看
transform-style是否被 strike-through - 修复动作：给每一层父容器（从
.scene到直接父级）都显式写transform-style: preserve-3d - 常见干扰源：
overflow: hidden、filter、opacity: 0.99的父容器，可能意外创建新 stacking context 并中断 3D 链
backface-visibility: hidden 必须写在翻转元素自身上
这个属性不是优化项，而是 Safari 启用深度缓冲的开关。它不继承，也不接受“父设子用”。漏掉任何一个可能翻转到背面的元素（比如 .front、.back，甚至 ::before），交叠区域就会出现闪烁、内容重叠、视觉穿透。
- 错误写法：
.card { backface-visibility: hidden; }—— 只设容器，子面无效 - 正确写法：
.card .front, .card .back { backface-visibility: hidden; } - 伪元素也要单独加：
.card::before { transform: rotateY(180deg); backface-visibility: hidden; } - 关键前提：
backface-visibility前必须有一条有效的transform声明（如transform: rotateY(0)），且不能是none或空值
perspective 和 preserve-3d 必须同级设置，且不能挂在 body 上
把 perspective 加在 body 或 html 上，整个页面都会变成一个巨型 3D 上下文。这时 position: fixed 元素会失去视口锚定能力，滚动时错位、消失，看起来就像“穿透”了遮罩层。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用独立容器包裹 3D 区域，例如
<div class="scene"></div>，然后只在它上面写：.scene { perspective: 1000px; transform-style: preserve-3d; } - 必须加
-webkit-perspective前缀，iOS Safari 15.4 之前版本不认标准属性 - perspective 值不能过小（如
50px）或为0，否则 Safari 直接关闭透视投影，降级为 2D - 子元素必须自己带非空
transform（哪怕只是translateZ(0)），否则不参与 3D 排序
z-index 在 preserve-3d 容器内完全失效
这不是 bug，是设计如此。启用 preserve-3d 后，浏览器按每个元素变换后的实际 Z 坐标（由 translateZ()、rotateX() 等共同决定）做深度排序，z-index 被彻底忽略。
- 想让 A 盖住 B，别调
z-index，改 A 的translateZ(80px)和 B 的translateZ(20px) - 负 Z 值（如
translateZ(-100px)）在 Safari 中渲染不稳定，优先用正值前移 - 若真需绕过 3D 排序（比如弹窗遮罩），就把该元素移出
preserve-3d容器，用position: fixed挂到body下 - 多个同级元素的 Z 值建议拉开差距（如
10px、60px、120px），避免因透视压缩导致肉眼难辨
最常被忽略的一点：Safari 的 3D 渲染不是“开了就稳”，而是每一步都依赖精确的声明顺序、作用域归属和值有效性。少一个 -webkit- 前缀、多一个 overflow: hidden 父容器、或伪元素漏了 backface-visibility，都足以让整套 3D 结构瞬间坍缩成平面。调试时务必打开 Safari 的 Compositing Borders 和 Styles 面板，盯着橙色边框和 strike-through 属性看，而不是凭经验猜。
