1

对于这样的布局： http: //codepen.io/anon/pen/dPwQod

HTML：

<div class="fixed-bg one"></div>
<div class="something"></div>
<div class="fixed-bg two"></div>
<div class="something"></div>
<div class="fixed-bg three"></div>
<div class="something"></div>
<div class="fixed-bg four"></div>
<div class="something"></div>

CSS：

.one {
  background: url('http://i.imgur.com/gAn5IiK.jpg');
}
.two {
  background: url('http://i.imgur.com/dPG6S6o.jpg');
}
.three {
  background: url('http://i.imgur.com/rTQcvNZ.jpg');
}
.four {
  background: url('http://i.imgur.com/k9aRzrU.jpg');
}
.fixed-bg {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.something {
  width: 100%;
  height: 200px;
  background: black;
}

Chrome 会在滚动时重新绘制整个视口，使滚动非常缓慢，尤其是在视网膜显示器上。您可以通过在检查器中勾选“显示绘制矩形”来查看它。

我一直在寻找将背景强制为单个图层的方法，但没有找到适合这种布局的方法。有些人建议 translateZ(0) 并将背景放在它自己的固定 div 中，但这只有在有一个固定背景时才有效。有什么方法可以强制 chrome 在具有多个背景的滚动条上不重新绘制整个内容，例如这种布局？或者至少有一种方法可以在没有 Chrome 延迟的情况下使这种布局成为可能？

干杯。

4

0 回答 0