修复了 Chrome 中的 background-attachment 错误

Question

在 chrome 上使用 Mac 视网膜显示器查看此站点 http://jsfiddle.net/dN4S4/1405/ 时，背景未正确呈现。这是使用的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;
}

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

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

请注意 body 上的 "position: absolute" 不会导致此问题。它也会以不同的 "position" 和 "display" 值出现。

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

谢谢！

Answer 1

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

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

修复了 Chrome 中的 background-attachment 错误

Fix for background-attachment bug in Chrome

html

css

google-chrome

parallax