时间戳

首页 > 解决方案 > Chrome + position:fixed + background-attachment:fixed 的奇怪行为

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

问题描述

这个问题已在 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 技巧”时，它会变得非常迟钝/生涩，与例外行为相去甚远。

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

标签： cssgoogle-chromecss-positionbackground-attachment

解决方案

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

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 中。它可以在 codepen 中使用，但不确定它是否适用于您在实际站点上的特定情况...

推荐阅读