Chrome + position:fixed + background-attachment:fixed 的奇怪行为

Question

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

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

我制作了下面的代码笔来说明问题： 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 包装在一个容器 div 中，该容器 div 也是 position:fixed。它可以在 codepen 中使用，但不确定它是否适用于您在实际站点上的特定情况...