css - 通过转换防止 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/rgthree/cehzd/

希望对您有所帮助。