修复 Chrome 中的背景附件错误答案

【问题标题】：Fix for background-attachment bug in Chrome修复 Chrome 中的背景附件错误
【发布时间】：2018-06-26 03:35:32
【问题描述】：

当使用 Mac Retina 显示器在 chrome 上查看此站点 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;
}

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

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

请注意身体上的“位置：绝对”不会导致此问题。它也会出现在不同的“位置”和“显示”值上。

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

谢谢！

【问题讨论】：

标签： html css google-chrome parallax

【解决方案1】：

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

这里的主要见解是background-attachment: fixed 应该应用于不会“滚动”的父/容器div。想象你的card-wrapper 类是一个非常非常高的容器，它包含所有向上滚动的单个cards，而所有这一切，而具有背景图像的fixed 容器仍然固定在背景中。

【讨论】：