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

Question

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

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

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

编辑(05/22/2013):

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

我把这个问题冻结了整个网站:镜像

编辑:

例

这是我的代码的精简版,实际上有效:

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

Answer 1

在学习了关于chrome如何呈现元素(特别是固定元素)的TON后,我遇到了这个临时解决方案:

-webkit-transform: translateZ(0);

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

经过所有这些研究和故障排除后,我发现唯一真正的问题是chrome需要一直重绘元素,而不是停留在任意点并留下文物.由于纯CSS解决方案会产生一些性能问题,我发现了一种强大的方法,可以强制浏览器通过jQuery重绘元素!

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

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

当我在chrome about:flags部分(chrome:// flags /)中启用了固定位置元素的Compositing时,不会发生此问题.我正在运行Chrome版本27.0.1453.93.

about:标志设置

我的问题在某种程度上与Chrome如何处理固定元素的堆叠上下文以及在浏览器滚动时动画固定元素有关.本文对这些更改进行了扩展.

Answer 2

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

如果你不想点击,那么在动画制作过程中防止文物所需要的就是这一行的css:

-webkit-backface-visibility: hidden