Chrome渲染错误、Slick.js、Flash动画

Question

以下显示问题发生在Chrome (版本39.0.2171.95 dev-m)中，它已经在几台Windows PC和Mac上观察到。

似乎有两个罪魁祸首，一个使用Slick.js的幻灯片组件和一个flash动画。我已经更新了Slick.js，但无济于事。

无论组件位于何处，内容显示都将在同一位置切断。该位置似乎是从页面顶部固定的，而不是相对于浏览器的大小。

当您将鼠标移到该区域上时，下面的隐藏内容将以块的形式出现。调整浏览器大小或突出显示页面上的文本也会将其清除。

​

​

当这个bug还活着的时候，你可以在这里查看它http://sci.esa.int

有什么想法吗？

如果我通过删除js来破坏slick.js，那么Twitter组件就不会导致这个错误。如果我从页面中删除flash或twitter组件，错误就不会发生。

Answer 1

我找到了一个解决方案

html{
    -webkit-transform: translate3d(0, 0, 0);
}

不过，根据另一条评论，我已经添加了以下代码

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

Chrome redraw issue

尽管另一条评论表明它可能有缺点