css - Chrome + 位置 :fixed + background-attachement:fixed 的奇怪行为

Question

此问题已在 SO 和其他地方多次报告，但我找不到任何有效的解决方案。

如果您有固定位置的 div 和固定附加的背景，在某些特定情况下，在 Google Chrome 上呈现会出现错误(在 Firefox 和 IE11 上测试没有问题)。

我做了下面的codepen来说明这个问题: https://codepen.io/EricRondo/pen/PaENpe

如您所见，仅在 Chrome 上，背景没有覆盖所有 div，它应该是 400px 高度。

效果取决于“顶部”位置。这里当 top 增加 50px 时会发生什么: https://codepen.io/EricRondo/pen/WydwMW

我添加了另一个具有定义高度的 div，因为没有滚动实际上根本没有问题。很奇怪!

我遇到过很多解决方案，例如:

-webkit-transform: translateZ(0);

但是虽然它在“某些”情况下确实有效，包括上面的代码笔，但在我的情况下却不起作用，因为它涉及更多的容器和 JS 代码。但问题的根源本质上是相同的:只有当固定定位的 div 具有 background-attachment:fixed 时才会发生。

问题的完整网站在这里: http://reims.dev-indelebil.com/

Firefox 没问题:干净平滑的视差效果，但 Chrome 会出现这种奇怪的行为。当在容器上添加 translateZ(0) 或任何其他“GPU 技巧”时，它变得迟钝/生涩，远非异常行为。

提前感谢您提供任何建议或解决方案!

Answer 1

我胡思乱想并想出了这个，我不确定它是否适用于您的特定情况:

https://codepen.io/anon/pen/ERogXM

.fixed {
  position:fixed;
}
.elt {
  position:fixed;
  top:250px;
}

然后:

<div class="fixed">
  <div class="elt"></div>
</div>

基本上将 .elt div 包装在一个同样为 position:fixed 的容器 div 中。它在 codepen 中有效，但不确定它是否适用于您在实际站点上的特定情况...