html - HTML/CSS Chrome の再描画なしの複数の固定背景

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 はスクロール時にビューポート全体を再描画するため、特に Retina ディスプレイではスクロールが非常に遅くなります。インスペクターで「ペイント長方形を表示」にチェックを入れると、実際に表示できます。

背景を個々のレイヤーに強制する方法を探しましたが、このレイアウトに合ったものは見つかりませんでした. translateZ(0) を提案し、背景を独自の固定 div に配置することを提案する人もいますが、これは固定背景が 1 つある場合にのみ機能します。このレイアウトのような複数の背景を持つスクロールでクロム全体を再描画しないようにする方法はありますか? または、少なくとも Chrome の遅延なしでこのレイアウトを可能にする方法はありますか?

乾杯。