Question

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

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

我在下面编写了以下代码来说明问题： https://codepen.io/EricRondo/pen/PaENpe

正如您所看到的，仅在Chrome上，背景并不覆盖所有div，其高度应为400px。

效果取决于＆＃34; top＆＃34;位置。当top增加50px时会发生什么： https://codepen.io/EricRondo/pen/WydwMW

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

我遇到了许多解决方案：

-webkit-transform: translateZ(0);

虽然它确实在＆＃34;有些＆＃34;案例，包括上面的codepens，它不在我的情况下，它涉及更多的容器和JS代码。但问题的根本基本相同：只有当固定的div具有背景附加时才会发生：固定。

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

Firefox没问题：干净平滑的视差效果，但Chrome使用这种奇怪的行为。当添加translateZ（0）或任何其他＆＃34; GPU技巧＆＃34;在容器上它变得迟钝/生涩，远非例外行为。

感谢提前获得任何建议或解决方案！

Answer 1

我愚弄了它并想出了这个，我不确定它是否适用于您的具体情况：

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

然后：

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

基本上将.elt div包装在容器div中，也就是位置：fixed。它适用于codepen，但不确定它是否适用于您在实际网站上的特定情况......