-webkit-transform 的闪烁/渲染问题答案

【问题标题】：Flickering/rendering issue with -webkit-transform-webkit-transform 的闪烁/渲染问题
【发布时间】：2012-04-18 11:22:49
【问题描述】：

-webkit-transform 遇到了一个奇怪的问题。如果我使用perspective 和rotateX 使一个元素“向上翻转”，如果元素足够高，它会闪烁或超过某个角度时根本不渲染。

我设置了一个jsFiddle demo 来说明问题。左右移动鼠标旋转矩形。

当元素高度为 400 像素时，一切似乎都正常。
单击“4000”使元素高 4000 像素。 文字在一定范围内停止更新，渲染闪烁。
单击“40000”使元素高 40000 像素。它在小角度渲染良好，但在大约 80 度时完全消失。

这里发生了什么？是否有解决方法或者我应该提交 WebKit 错误？

（注意：我在 OS X 上的 Safari 和 Chrome 中都看到了这种行为。）

【问题讨论】：

在 Windows 上的 Chrome 中看起来不错，除非我使用的小提琴错误。

标签： css webkit css-transforms

【解决方案1】：

此代码的问题在于CSS3 perspective 属性。当元素高度为 4000px 或更高时，它会在靠近屏幕时消失，因为它只有 500px 远（使用perspective 属性定义。
在那里，如果元素更高，则元素应该更远。

我做了一些 if 语句来根据元素高度获得不同的视角：

if (document.getElementById("m2").offsetHeight == 400) {
    document.getElementById("m2").style.webkitTransform = "perspective(500) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 4000) {
    document.getElementById("m2").style.webkitTransform = "perspective(5000) rotateX(" + (e.clientX / 5) + "deg)";
}

if (document.getElementById("m2").offsetHeight == 40000) {
    document.getElementById("m2").style.webkitTransform = "perspective(50000) rotateX(" + (e.clientX / 5) + "deg)";
}

【讨论】：

我稍后会对此进行更多测试，但通过快速测试，它似乎仍然有点闪烁（尽管没有那么糟糕！）。但是，当然，这极大地改变了视觉效果。有没有办法在不改变感知视角的情况下做类似的事情？
什么时候闪烁？是不是#m2很大，角度接近90度？
是的。 Here's a video 显示了我所看到的——我录制了原始版本和你的版本。
嗯，这似乎只是 Safari 中的问题。它也在我的 Safari 中闪烁，但在 Chrome 中没有。稍后我会看看它。