我在谷歌浏览器的网页上有一个奇怪的渲染故障。我在Mac Chrome和Windows下的并行虚拟机下复制了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())强制重绘。因此,这可能是有用的解决方法,可以帮助人们。 :)

最佳答案

我发现一个实际的修补程序不像我先前的尝试那样愚蠢且无法正常工作。

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


要澄清的是,对于发生这种情况的所有iframe,请应用上述CSS。

没有更多的故障。愚蠢的,我不知道为什么会这样,但是我只是尝试了一些随机的事情,然后又奏效了。我猜想它会启用某种不同的渲染流程,从而避免此错误,无论它是什么。

关于css - Chrome转换矩阵iframe渲染故障,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29800059/

10-09 15:06