具有固定背景和元素的 Webkit 渲染问题答案

【问题标题】：Webkit rendering issue with fixed background and element具有固定背景和元素的 Webkit 渲染问题
【发布时间】：2014-03-31 04:01:00
【问题描述】：

当我将背景设置为固定时，我在 Chrome Mac/android 上遇到了一个奇怪的渲染问题，并且我有一个固定元素，页面滚动将被其中一个背景覆盖。我没有在 Safari 中看到工件，仅在 chrome 上。

html, body {width:100%; height:100%; margin:0; padding:0;}
body {background:url(http://www.unsigneddesign.com/Seamless_background_textures/1200px/seamlesstexture14_1200.jpg) fixed;}
#logo {position:fixed; left:50%; top:50%; margin:-25px 0 0 -60px; background:url(http://www.seomofo.com/downloads/new-google-logo-knockoff.png) no-repeat; background-size:100% 100%; width:129px; height:50px;}
#content {width:100%; height:3000px; margin-top:100%; background:url(http://blog.spoongraphics.co.uk/wp-content/uploads/2012/textures/19.jpg) fixed; position:relative;}
#footer {height:100%;}

<div id="logo"></div>
<div id="content"></div>
<div id="footer"></div>

很难解释，建议直接试一试：

http://jsfiddle.net/RKtH4/

我很想知道其他人是否看到了这个问题，以及是否有解决办法？

【问题讨论】：

我看到谷歌上的灰色纹理滚动。我不确定你在说什么，你的问题有点模糊。你能解释一下吗？
如果你不知道我在说什么，你可能没有遇到这个问题。在我的 Chrome 版本上，这很明显。当您更快地滚动时，更容易看到它。我在 OSX 10.9.2 上运行版本 33.0.1750.152。看看我的截图oi59.tinypic.com/107oxgh.jpg
今天早上我在不同的mac（不是视网膜显示器）上尝试使用相同的操作系统版本和相同的chrome版本，我想知道我最初是否在视网膜显示器MBP上发现了这个问题，但是我无法在非视网膜显示器上重现...

标签： html google-chrome rendering fixed

【解决方案1】：

我遇到了同样的问题，其中有两个或多个使用 background-attachment:fixed 的图像。这只是 Mac Retina 显示器上的 Chrome 问题，我将其报告为错误。

重绘似乎试图将两个图像放在彼此的顶部，因为 Chrome 不知道哪个更重要，因此它会同时渲染两者。设置 z-index 无济于事，设置 translate3d 也无济于事。唯一有帮助的是隐藏其中一个图像，直到需要看到它，然后显示它并隐藏另一个。这样做的问题是它不允许达到预期的效果。

在 Firefox 和 Safari 中，Retina 显示器上的渲染效果很好，在 Chrome 中的非 Retina 显示器上也很好。

【讨论】：

问题中的另一个注意事项是冲突节点的位置设置为固定，并且背景附件已固定。我相信拥有这两个值会导致我的特定问题。一旦我将节点的位置更改为绝对位置，问题就消失了。