Chrome 变换矩阵 iframe 渲染故障

Question

我在 google chrome 中的网页上有一个奇怪的渲染故障。我在Mac Chrome下复制，在windows的parallels虚拟机下Chrome复制。

它应该是一个简单的可拖动 div。但是，当你拖动它时，它看起来像这样：http://imgur.com/VdY3Tv2

情况很不寻常；它是一个带有 css 变换矩阵的容器 div，包含一个 iframe，带有一个可拖动的 div。

我创建了一个演示。只需拖动 div：https://www.dropbox.com/s/cjq39w82mghuze2/bug.7z?dl=0

知道是什么原因造成的吗？

[编辑]

我还是不知道。但是：更新父元素的变换矩阵（在我的例子中，我使用的是 fit.js，并调用 watch.trigger()）强制重绘。因此，这可能是一个有用的解决方法，可以帮助人们。 :)

Answer 1

我发现了一个实际的修复方法，它不像我之前的尝试那样愚蠢和半途而废。

iframe {
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

为了澄清，对于发生这种情况的任何 iframe，请应用上述 CSS。

没有更多的故障。愚蠢，我不知道它为什么会起作用，但我只是尝试了随机的东西，然后它就起作用了。我猜它会启用某种不同的渲染流程来避免这个错误，不管它是什么。