html - 修复了 Chrome 中的背景附件错误

Question

浏览本站时http://jsfiddle.net/dN4S4/1405/在带有 Mac 视网膜显示器的 chrome 上，背景未正确呈现。这是使用的 CSS:

body{
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
}
#cards{
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.card-wrapper{
    width: 100%;
    height: 100%;
    background: url(url here);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.card{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.875);
    font-family: "Helvetica Neue", Helvetica, Arial;
    font-size: 14px;
    text-align: left;
    color: #FFFFFF;
}

我发现这是一个已知问题，但尚未找到真正有效的修复方法。它在任何其他浏览器上都按预期呈现，甚至在使用“正常”显示查看网站时在 chrome 中也能正常工作。

为简单起见，我在演示中使用了相同的图像，但我想使用不同的图像来创建“视差”效果。

请注意，主体上的“position: absolute”不会导致此问题。它也会出现在不同的“位置”和“显示”值上。

关于如何使其正确呈现的任何建议？

谢谢!

Answer 1

我已经 fork 并调整了你的 JSFiddle使视差效果以我期望的方式工作，但您必须亲自检查以进行验证。

这里的主要见解是 background-attachment: fixed 应该应用于不会“滚动”的父/容器 div。将您的 card-wrapper 类想象成一个非常非常高的容器，容纳所有向上滚​​动的单个 card，而所有这些都是 fixed 具有背景图像的容器在背景中保持固定。