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

【问题标题】：Chrome rendering bug, Slick.js, Flash animationChrome 渲染错误、Slick.js、Flash 动画
【发布时间】：2015-03-29 22:17:32
【问题描述】：

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

似乎有两个罪魁祸首可能导致这种情况，一个使用 Slick.js 的幻灯片组件和一个 Flash 动画。我更新了 Slick.js 无济于事。

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

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

虽然该错误仍然存在，但您可以在此处查看 http://sci.esa.int

有什么想法吗？

如果我通过删除 js 来破坏 slick.js - 那么 Twitter 组件不会导致错误。如果我从页面中删除 flash 或 twitter 组件，则不会出现错误。

【问题讨论】：

在我的Version 40.0.2214.94 m chrome 中看起来不错
可以在40.0.2214.93 mwin看到它，我注意到如果你调整窗口大小它就会消失
一位朋友刚刚尝试了 40.0.2214.93（64 位） - 看到了这个错误，用 40.0.2214.94 重新启动，但仍然损坏.. 该死
我没有发现您发给我的链接有任何问题。

标签： javascript jquery html css google-chrome

【解决方案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

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

【讨论】：