<p>穿模问题在 Safari 中主要因 backface-visibility: hidden 缺失或错位、transform 声明顺序错误、preserve-3d 父链中断、perspective 值过小或缺失 -webkit- 前缀导致，需逐层检查 computed styles 确保三者均 active。</p>
穿模问题在 Safari 中几乎总是因 backface-visibility: hidden 缺失或错位导致，而不是透视值或动画逻辑本身有问题。
backface-visibility: hidden 必须写在执行变换的元素自身上
这个属性不继承，也不接受“父设子用”。Safari 会严格检查：只有明确写了 backface-visibility: hidden 的元素，才启用背面剔除和深度缓冲。漏掉任何一个翻转面（比如 .front 或 .back），交叠区域就会穿模、闪烁甚至内容重叠。
- 错误写法：
.card { backface-visibility: hidden; }—— 只设容器，子面无效 - 正确写法：
.card .front, .card .back { backface-visibility: hidden; } - 如果用了伪元素（::before/::after）做翻转面，它们也必须单独声明该属性
transform 声明必须前置，且不能为 none 或空值
Safari 解析 CSS 时，backface-visibility 是否生效，取决于它前面是否有一条有效的 transform 声明。顺序颠倒、中间有注释、或 transform 被覆盖为 none，都会让整个 3D 渲染路径退化。
- ✅ 有效：
transform: rotateY(0); backface-visibility: hidden; - ❌ 失效：
backface-visibility: hidden; transform: rotateY(0); - ❌ 失效：
transform: none; backface-visibility: hidden; - ⚠️ 注意：某些 CSS 重置库会悄悄把 transform 设为 none，需检查 computed styles
preserve-3d 父链中断 + 子元素无 transform 声明
Safari 要求：所有参与 3D 排序的元素，其 DOM 父链上每一层都必须显式设置 transform-style: preserve-3d，且每个子元素自己要有非空 transform（哪怕只是 translateZ(0)）。缺一层，就降级为平面渲染，z 坐标被丢弃，穿模随之而来。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 检查点：用 Safari 开发者工具选中穿模元素 → Styles 面板看
transform-style是否被 strike-through - 常见干扰源：UI 框架的 reset.css、第三方组件的 wrapper、
overflow: hidden父容器意外创建新 stacking context - 救急写法：给每个需要深度排序的子元素加
transform: translateZ(0);，强制 Safari 认可其 3D 身份
perspective 值过小或未加 -webkit- 前缀
iOS Safari（尤其 15.4 之前）对 perspective 极其敏感。设为 50px 或 0 会直接关闭 3D 投影；不加 -webkit-perspective 在旧机型上等于没写。
- 移动端推荐起始值：
-webkit-perspective: 600px; perspective: 600px; - 桌面端推荐：
-webkit-perspective: 1000px; perspective: 1000px; - 绝对不要动态修改该值——每帧重算投影矩阵会导致卡顿或空白帧
- perspective 必须和
transform-style: preserve-3d写在同一元素上，且是变换元素的**直接父级**
真正难调试的，是多个条件同时满足却因某一行 CSS 顺序或一个隐藏的 reset 规则而失效。建议真机连接 Safari Web Inspector，逐层检查 computed styles 中的 transform-style、backface-visibility 和 transform 是否全为 active 状态，而非被覆盖或计算为空。
