Safari 17无法渲染3D立方体部分面的问题排查与解决

问题描述 #

我制作了一个简单的旋转3D立方体，在Safari 17浏览器中仅能显示立方体的正面和背面，左右两侧面无法正常显示，但在其他浏览器中表现正常。

原代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Rotating Cube</title>
<style>
  .cube-container {
    perspective: 600px;
    width: 200px;
    height: 200px;
    margin: 100px auto;
  }

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d;
    animation: rotateCube 5s infinite linear;
}

  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.5);
    border: 2px solid #000;
  }

  .front  { transform: translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); }
  .right  { transform: rotateY(90deg) translateZ(100px); }
  .left   { transform: rotateY(-90deg) translateZ(100px); }
  .top    { transform: rotateX(90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }

  @keyframes rotateCube {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
  }
</style>
</head>
<body>

<div class="cube-container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face right">Right</div>
    <div class="face left">Left</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

</body>
</html>

问题原因 #

Safari 17对CSS 3D变换的顺序解析存在特殊性：标准浏览器是从右到左执行变换（即先执行translateZ，再执行rotateY），但Safari会从左到右执行变换（先执行rotateY，再执行translateZ）。

对于左右侧面，原代码是rotateY(90deg) translateZ(100px)，在Safari中会先把侧面绕Y轴旋转90度，再沿Z轴平移100px，这会导致侧面被移到立方体的外部空间，从而无法在视角内显示。

修复方案 #

调整变换顺序，将translateZ放在旋转操作之前，让Safari能正确解析侧面的3D位置：

修改左右侧面的CSS规则：

.right  { transform: translateZ(100px) rotateY(90deg); }
.left   { transform: translateZ(100px) rotateY(-90deg); }

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Rotating Cube</title>
<style>
  .cube-container {
    perspective: 600px;
    width: 200px;
    height: 200px;
    margin: 100px auto;
  }

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d;
    animation: rotateCube 5s infinite linear;
}

  .face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.5);
    border: 2px solid #000;
  }

  .front  { transform: translateZ(100px); }
  .back   { transform: rotateY(180deg) translateZ(100px); }
  .right  { transform: translateZ(100px) rotateY(90deg); }
  .left   { transform: translateZ(100px) rotateY(-90deg); }
  .top    { transform: rotateX(90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }

  @keyframes rotateCube {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
  }
</style>
</head>
<body>

<div class="cube-container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face right">Right</div>
    <div class="face left">Left</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

</body>
</html>

这样修改后，Safari 17就能正确渲染立方体的所有侧面了，同时其他浏览器的显示效果不受影响。

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