Question

我正在建立一个使用固定背景图片在各个部分之间转换的网站。目前，它是纯CSS。这个效果适用于我测试过的每个浏览器，除了一个：Mac上的Chrome（版本33.0.1750.146或版本34.0.1847.45 beta）。似乎在PC上的Chrome上运行良好。

发生的事情很奇怪......在滚动时，图像会重复并重叠，整体非常扭曲。经过一点滚动后，它就消失了。它不会在向上滚动时重新出现。

任何想法或解决方案？！

当前页面：http://margusity.com/follies-beta

当前屏幕截图（已损坏，镀铬）：http://cloud.ikilledtheinter.net/ULra

当前截图（工作，狩猎）：http://cloud.ikilledtheinter.net/ULxH

看似相关的CSS：

.chris, .eric,  {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  z-index: 50;
  width: 100%;
  height: 100%;
}

.chris {
  background-image: url(../img/people/chris.png);
}

.eric {
  background-image: url(../img/people/eric.png);
}

编辑：它似乎是导致问题的固定背景元素。从#behind中删除“position：fixed”（css未在上面显示）修复了上述问题，但未解决我的要求。立即着手解决方案！

Answer 1

我遇到了同样的问题。看起来您的网站现在正在运行，您可以分享您的解决方案吗？

编辑：删除position: relative;并将html和正文设置为height: 100%;都解决了我的问题。

Answer 2

切换unnested位置：fixed element out修复了问题。我不知道为什么。为了完全解决这个问题，我将主体设置为包含一个附件：固定的背景图像，其他元素全部滚动，带有各自的附件：固定的背景图像。但是我想知道为什么原版在某些浏览器上仅在Mac上的Chrome中失败，但在其他地方工作-__-

Answer 3

Chrome 38 Canary，Windows 8.1

相同错误：http://puu.sh/aOKEH/77538a9a01.jpg

许多其他页面也有错误...（例如Twitter固定背景）

修复了背景图片bug Chrome Mac

3 个答案: