通过变换防止Safari切割

Question

我有一个绝对位于另一个元素之上的元素。事情是背景元素有一个小的JS在Y轴上旋转，取决于鼠标的移动。不幸的是，我发现Safari中没有出现在Firefox或Chrome中的问题。

http://jsfiddle.net/cehzd/2/

背景元素通过前景元素切断，我想知道是否有任何东西可以阻止这种情况，或者让它像Firefox一样。

编辑：更新了示例以包含背景图像（渐变），这比我在网站上看到的更准确。这个错误确实出现在Windows和Mac上（与之前的例子不同，sans背景图片，仅在Windows上）

Answer 1

肯定存在一个错误，但我不得不改变你的JSFiddle。 （你从实际代码中剥离了太多吗？）。我可以使用-webkit-transform-style: preserve-3d;重新创建您的问题，而不使用它（或使其flat）修复我的代码中的“剪切”。

看看这个JSFiddle与我的bug版本（注释掉）和修复程序。请注意，应用-webkit-transform-style: preserve-3d;确实会在Safari（Mac）中创建您的错误，而不是在Chrome中：http://jsfiddle.net/rgthree/cehzd/

希望这有帮助。

Answer 2

我只需在前景中的容器中添加transform: translateZ(100px);，其中100px是蓝色容器的宽度除以2，因为其transform-origin是默认50% 50% 。只要外部包装器没有transform: scale(...); transform-style，它就不会与preserve-3d具有相同的效果。