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

我在Chrome Mac/android上有一个奇怪的渲染问题，当我设置我的背景被修复时，我有一个固定的元素，页面滚动将覆盖其中一个背景。我没有看到Safari中的工件，只在铬上出现。带有固定背景和元素的Webkit渲染问题

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/

我很好奇，想知道是否有其他人在看到的问题，如果有一个修复？

来源

2014-03-31 nox

我看到谷歌上的灰色纹理滚动。我不知道你在说什么，你的问题有点含糊。你可以解释吗？ –

如果你不知道我在说什么，你可能没有遇到这个问题。在我的Chrome版本中，它很明显。当您滚动更快时，更容易看到它。我在OSX 10.9.2上运行版本33.0.1750.152。看看我的截图http://oi59.tinypic.com/107oxgh.jpg – nox

因为我今天早上在不同的mac上（不是视网膜显示器）尝试，使用相同的os版本和相同的chrome版本，我想知道是否事实上，我最初发现在视网膜显示MBP的问题，但我不能在非视网膜显示器上复制... – nox

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

重绘似乎试图将两个图像放在彼此之上，因为Chrome不知道哪一个更重要，因此呈现它们。设置z-index并没有帮助，也没有设置translate3d。唯一有用的是隐藏其中一个图像，直到它被期望被看到，然后显示它并隐藏另一个。问题在于它不允许达到预期的效果。

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

来源

2014-09-23 16:39:45

该问题的另一个注意事项是，冲突节点的位置设置为固定，附件是固定的。我相信有这两个价值观引起了我的特殊问题。一旦我将节点的位置改为绝对，问题就消失了。 –

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

回答

相关问题