Safari中的3D CSS存在问题

Question

我正在尝试用CSS创建一个旋转的三维框。盒子位于垂直面板上。

CSS在Chrome和Firefox中运行良好，但在Safari中，人脸在一轮结束时会变得一团糟。前面的灰色部分"；跳跃"；以一种奇怪的方式。

CodePen示例如下：https://codepen.io/jsoceandiver/pen/RwKEWbO

任何帮助都将不胜感激。

编辑：

我试图删除transformorigin属性，但仍然存在一个问题：https://codepen.io/jsoceandiver/pen/JjEwXJy

编辑#2

我发现了问题——它是HTML标记上的透视属性。一旦我删除了它，问题就消失了。固定代码笔在这里-https://codepen.io/jsoceandiver/pen/PoWXzOZ

html, body{ 
background: #fff;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
perspective: 2000px;
width: 100%;
height: 100%;
}
body *{
box-sizing: border-box;
transform-style: preserve-3d;
transform-origin: 0 0;
}
.panel{
border: 1px solid #111;
width: 300px;
height: 200px;
position: relative;
animation: rotation 5s infinite linear;
transform-origin: 50% 50%;
}
@keyframes rotation {
100% { transform: rotateY(360deg); }
}
.box{
width: 100px;
height: 100px;
bottom: 0;
position: absolute;
}
.box-part{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #000;
left: 0;
top: 0;
transform-origin: 0 0;
}
.box-part__front{
background: gray;
transform: translateZ(50px);
}
.box-part__back{
transform: translateZ(-50px);
background: red;
}
.box-part__left{
transform: translateZ(50px) rotateY(-270deg);
background: yellow;
}
.box-part__right{
left: 100%;
transform: translateZ(50px) rotateY(90deg);
background: blue;
}
.box-part box-part__top{
transform: rotateX(90deg);
background: #000;
}
.box-part box-part__bottom{
top: 100%;
transform: rotateX(90deg);
}

<div class="panel">
<div class="box">
<div class="box-part box-part__back"></div>
<div class="box-part box-part__front"></div>
<div class="box-part box-part__left"></div>
<div class="box-part box-part__right"></div>
<div class="box-part box-part__top"></div>
<div class="box-part box-part__bottom"></div>
</div>
</div>

谢谢

Answer 1

从HTML标记中删除透视属性可以修复此问题。

例如，以下代码：

html, body{
perspective: 2000px;
width: 100%;
height: 100%;
}

应更改为：

html, body{
width: 100%;
height: 100%;
}
body{
perspective: 2000px;
}

工作代码笔在这里：https://codepen.io/jsoceandiver/pen/PoWXzOZ