html - Chrome 27 : Fixed Element Leaves Artifacts Behind After JQuery Animation

Question

我遇到了一个非常奇怪的错误。我有一个元素，在您移动光标并选择它之前，背景颜色会逐渐消失。

这是页面: http://austinpray.com/test

这是一个视频: https://www.dropbox.com/s/t1f7fnvxslebjwj/2013-05-16%2016.33.21.mov

视频是用 iPhone 拍摄的，因为奇怪的是，当我使用屏幕录像机时，问题并没有出现。它只发生在 chrome 内部。我已经尝试了 chrome 和空白安装的 ​​chromium 将清除所有缓存等等，但这种情况仍然发生。

我错过了什么？当我在不同的设备上进行更多测试时，我会更新。

编辑(2013 年 5 月 22 日):

我做了更多研究，发现了以下行为: https://www.dropbox.com/s/7tdz41l89qttmnx/2013-05-22%2017.20.20.mov

当动画和滚动同时发生时，问题似乎出现了。

我用这里的问题卡住了整个网站:mirror

编辑:

例子

这是我实际工作的代码的精简版本:

DEMO

这个问题不存在。以下演示和导致问题的代码有何不同？我已经尝试剥离视差背景代码，但这对解决问题没有任何帮助。我目前正在重写整个菜单的 css，看看我是否遗漏了一些简单的东西。

Answer 1

临时解决方法

在学习了大量关于 chrome 如何渲染元素(尤其是固定元素)之后，我遇到了这个临时解决方案:

-webkit-transform: translateZ(0);

我将其添加到我的导航栏样式中。这基本上是一个古怪的小 hack，它不对页面做任何事情并打开 GPU 加速。现在必须这样做，直到更新 chrome 或直到我重写整个菜单栏功能。唯一的缺点是调整窗口大小会影响性能。

更优雅的解决方案

在所有这些研究和故障排除之后，我发现唯一真正的问题是 chrome 需要一直重绘元素，而不是停在任意点并留下伪影。由于纯 CSS 解决方案会产生一些性能问题，我 I found一种通过 jQuery 强制浏览器重绘元素的好方法!

$.fn.redraw = function(){
    $(this).each(function(){
        var redraw = this.offsetHeight;
    });
};

我在已部署的页面上使用它，它似乎运行良好，没有影响性能。只要 chrome 27 仍在 float ，我就会保留它。

我还发现了奇怪的行为，可能是问题的根源:

当我在 chrome about:flags 部分 (chrome://flags/) 中启用固定位置元素的合成 时，不会出现此问题。我运行的是 Chrome 版本 27.0.1453.93。

我的问题在某种程度上与 chrome 处理 the stacking context 的方式有关浏览器滚动时固定元素和动画固定元素。 This article对更改进行了一些扩展。

How Chrome handles compositing

GPU acceleration as it related to compositing