Question

对于这样的布局：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延迟的情况下实现这种布局？

干杯。

HTML / CSS多个固定背景，无需重新绘制Chrome

0 个答案: