Safari浏览器中CSS transform卡片旋转异常问题求助

问题描述 #

在iOS设备的Safari浏览器中运行卡片旋转代码时，图标与卡片出现显示异常，其他设备浏览器表现正常。设置transform-style: preserve-3d时问题出现，但希望保持2D模式。

问题原因 #

iOS Safari对CSS 3D变换的渲染逻辑存在兼容性差异：即使父元素设置transform-style: flat，当子元素使用backface-visibility: hidden和3D旋转（如rotateY）时，浏览器仍可能强制触发父元素的3D渲染上下文，导致绝对定位的图标元素被错误地卷入3D变换的层级计算中，出现显示错乱。

解决方法 #

方法一：改用2D变换实现翻转（推荐，纯2D场景） #

放弃3D旋转，使用scaleX(-1)结合opacity实现翻转效果，彻底规避Safari的3D渲染问题：

修改后的完整CSS代码：

.card {
  height: 500px;
  width: 300px;
  position: relative;
  background-color: antiquewhite;
}

.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  transition: transform 1s, opacity 1s;
}

.back {
  transform: translate(-50%, -50%) scaleX(-1);
  background-color: purple;
  opacity: 0;
}

.front {
  background-color: yellowgreen;
}

.card.clicked .front {
  transform: translate(-50%, -50%) scaleX(-1);
  opacity: 0;
}

.card.clicked .back {
  transform: translate(-50%, -50%) scaleX(1);
  opacity: 1;
}

.icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: olive;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

方法二：强制图标脱离3D渲染层级（保留3D翻转效果） #

如果需要保留3D旋转效果，给图标添加translateZ(1px)，强制它处于3D层级的更高平面，同时开启硬件加速提升稳定性：

修改.icon的CSS代码：

.icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(1px);
  width: 50px;
  height: 50px;
  background-color: olive;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  will-change: transform;
}

内容的提问来源于stack exchange，提问作者KAN