Question

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

我很想知道其他人是否看到了这个问题，是否有修复？

Answer 1

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

重绘似乎是试图将两个图像放在彼此之上，因为Chrome并不知道哪一个更重要，因此渲染两者。设置z-index并没有帮助，也没有设置translate3d。唯一有用的是隐藏其中一个图像，直到需要看到它，然后显示它并隐藏另一个。这个问题是它不能产生预期的效果。

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

Webkit渲染问题与固定的背景和元素

1 个答案: