通过转换防止 Safari 剪切

Question

我有一个元素绝对位于另一个元素之上。问题是背景元素有一点 JS 可以根据鼠标的移动在 Y 轴上旋转。不幸的是，我在 Safari 中发现了一个在 Firefox 或 Chrome 中没有出现的问题。

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

背景元素穿过前景元素，我想知道是否有什么可以防止这种情况，或者让它像 Firefox 一样运行。

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

Answer 1

肯定有一个错误，但我不得不对你的 JSFiddle 进行相当多的更改。（您是否从实际代码中剥离了太多内容？）。我能够通过使用-webkit-transform-style: preserve-3d;而不使用它（或使其flat）修复我的代码中的“剪切”来重新创建您的问题。

看看这个 JSFiddle 以及我的错误版本（已注释掉）和修复。请注意，应用该方法-webkit-transform-style: preserve-3d;确实会在 Safari (Mac) 中产生错误，但不会在 Chrome 中产生错误： http: //jsfiddle.net/rg Three/cehzd/

希望这有帮助。