Safari中3D变换过程中出现裁剪问题

Question

我在进行3D旋转时遇到了有趣的剪裁问题。我使用以下代码来旋转元素：

-webkit-transform: rotate3d(0, 1, 1, 180deg);

在动画过程中，它在Chrome、Firefox和其他浏览器中看起来都很好，但在Safari中却不行。

窗口会穿过它后面的元素，这不应该是z-index的问题，因为我已经为这些元素分配了适当的z-index。

有人知道这种情况在Safari中发生的原因吗？

这是在Safari中动画效果的样子：

而在Chrome中则是正确的动画效果

谢谢！

- striff88

---

你能在JSFiddle上复制一下或者展示更多的代码吗？我相信你遇到了问题，但是让其他人在JSFiddle上调试可能有助于排除其他问题。话虽如此，我之前也遇到过类似的问题，虽然听起来很奇怪，但是尝试在冲突元素上添加一个0,0,0的3D变换以强制渲染，看看是否有帮助。 - Leeish

有进展吗？这个问题现在开放时间太长了。 - actimel

Answer 1

也许是因为您使用的 Safari 版本不太支持 z-index 属性 请查看 caniuse.com

- Aston Haigh

---

真的吗？你知道有些浏览器支持3D变换，但不支持z-index这样基本的东西吗？这是因为在3D空间中的物体相交，但我不知道为什么有些浏览器支持而有些不支持。裁剪掉某个元素后面的部分是一件合乎逻辑的事情，但大多数时候你并不需要它。我现在也在与此挣扎。 - actimel

Answer 2

尝试将旋转模态框的容器设置为transform-style: flat和一个新的perspective。您需要更改3D渲染上下文。

这与https://dev59.com/AWMl5IYBdhLWcg3wwZTc#18167565相关--但您可能不想改变Z轴上的位置，因为它会显着改变外观。我也无法使用它。

- actimel

Answer 3

有一段时间了，但我也遇到了同样的问题，actimel提供了一个优雅的解决方法。（尽管他们指出，这只适用于背景元素没有被转换为3D的情况。）

将以下两行添加到背景元素（或包含这些元素的容器，或所有这些元素都所属的类）中：

-webkit-transform: translateZ(-1000px);
-webkit-perspective-origin: 100% 100% none;

祝未来的读者好运！:)

- OhSafariNo

---

已修复 Safari 16（目前最新版本）的问题。 - aznoqmous