Chrome 27：固定元素在JQuery动画之后留下了伪影

Question

我遇到了一个非常奇怪的错误。我有一个元素，背景颜色会下降，直到你拿光标并选择它。

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

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

视频是用iPhone拍摄的，因为当我奇怪地使用屏幕录像机时不会出现问题。它只发生在铬内部。我已经尝试了铬和空白安装的铬将清除所有缓存，这样仍然会发生。

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

编辑（2013年5月22日）：

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

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

我在这里解决了整个网站的问题：mirror

编辑：

实施例

以下是我的代码的精简版本，实际上有效：

DEMO

这个问题不存在。下面的演示和导致问题的代码有什么不同？我试图剥离视差背景代码，并没有解决问题。我目前正在重写整个菜单的CSS，看看我是否错过了一些简单的东西。

Answer 1

临时解决方法

在学习了关于铬如何渲染元素（特别是固定元素）的TON后，我遇到了这个临时解决方案：

-webkit-transform: translateZ(0);

我将此添加到导航栏的样式中。这基本上是一个古怪的小黑客，它对页面没有任何作用，并且会启用GPU加速。在更新chrome或直到我重写整个菜单栏功能之前，这必须要做。唯一的缺点是调整窗口大小会受到性能影响。

更优雅的解决方案

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

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

我在已部署的页面上使用它，它似乎工作得很好而没有性能命中。只要铬27仍然漂浮在周围，我就会保留它。

我也发现了奇怪的行为，可能还有问题的根源：

当我在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

Answer 2

由于这个答案在搜索此问题时首先出现，我认为链接到另一个似乎可以更充分地解决问题的答案会有所帮助。

https://stackoverflow.com/a/12023155/2192201

如果您不想点击，那么在动画制作过程中防止文物所需的一切就是这一行css：

-webkit-backface-visibility: hidden