4

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

这是页面： 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

编辑：

例子

这是我的代码的精简版本，它实际上可以工作：

演示

这个问题不存在。以下演示和导致问题的代码有什么不同？我已经尝试去除视差背景代码，但这并不能解决问题。我目前正在重写整个菜单的 css，看看我是否遗漏了一些简单的东西。

4

2 回答 2

16

临时解决方法

在了解了有关 chrome 如何渲染元素（尤其是固定元素）的 TON 之后，我遇到了这个临时解决方案：

-webkit-transform: translateZ(0);

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

更优雅的解决方案

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

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

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

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

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

关于：标志设置

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

Chrome 如何处理合成

GPU 加速，因为它与合成有关

于 2013-05-23T02:38:24.873 回答
5

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

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

如果您不想点击，那么在制作动画时防止伪影所需要的就是这行 css：

-webkit-backface-visibility: hidden
于 2013-11-18T14:24:22.933 回答