css - Chrome 变换矩阵 iframe 渲染故障

Question

我在谷歌浏览器的网页上出现了一个奇怪的渲染故障。我在 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，并调用 watching.trigger())强制重绘。所以，这可能是一个有用的解决方法，可以帮助人们。 :)

Answer 1

我找到了一个真正的修复程序，它不像我之前的尝试那样愚蠢和半工作。

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

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

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