Safari中添加box-shadow导致CSS3D卡片正面div消失问题

算力阿峰

2026-8-30

问题成因

这是Safari（覆盖macOS、iOS端全版本WebKit内核Safari）的已知3D渲染bug，触发条件为元素同时满足三个属性特征：

处于3D变换上下文内（自身或父级设置了transform-style: preserve-3d、应用了rotate3d等3D变换属性）
设置了backface-visibility: hidden
配置了box-shadow阴影
触发bug时，Safari的渲染引擎会错误判定该元素当前是背面朝向视口，直接将元素隐藏，在开发者工具里切换box-shadow开关看到的元素显隐效果，就是这个错误判定逻辑的直接表现。Chrome、Firefox针对这类3D场景下的阴影渲染做了兼容处理，所以不会复现问题。

修复方案

以下两种方案任选其一即可，均经过实机验证：

方案1：最小改动修复

给正面面板添加1px的Z轴位移，强制将元素提升到独立3D渲染层，绕开Safari的层级计算错误。注意要保留原有旋转变换属性，避免覆盖原有动画效果：

.card__panel--front {
  /* 原有backface-visibility、background、z-index、box-shadow属性全部保留 */
  transform: rotate3d(0, 1, 0, 0deg) translateZ(1px);
}
.open .card__panel--front {
  transform: rotate3d(0, 1, 0, -170deg) translateZ(1px);
}

这个方案代码改动量最小，仅需要调整两行transform属性即可生效。

方案2：无副作用适配

不直接在参与3D变换的主元素上挂载阴影，把阴影拆分到独立伪元素上渲染，从根源上避开触发bug的属性组合，不会改动原有3D变换坐标，不会出现动画偏移问题，适配所有Safari版本：

.card__panel--front {
  /* 删掉原有的box-shadow属性，其余属性保留，补上相对定位 */
  position: relative;
}
.card__panel--front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backface-visibility: hidden;
  /* 把原有的阴影移到这里 */
  box-shadow: black 10px 10px 10px;
}