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

Question

Chrome(版本 39.0.2171.95 dev-m)中出现以下显示问题 已在多台 Windows PC 和 Mac 上观察到该问题。

似乎有两个罪魁祸首可能导致此问题，即使用 Slick.js 的幻灯片组件和 Flash 动画。我已经更新了 Slick.js，但没有效果。

无论组件位于何处，内容显示都会在同一位置切断。该位置似乎从页面顶部开始是固定的，与浏览器的大小无关。

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

虽然该错误仍然存​​在，但您可以在此处查看它 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

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