css - スクロールを避けるために背景を固定すると、mix-blend-mode css 効果が損なわれるのはなぜですか? クロームのみ

Question

で遊んでいると、変なものを見つけましたmix-blend-mode。背景画像を修正すると、mix-blend-mode効果が機能しません。これは Chrome で発生しています。しかし、Firefox では問題なく動作します。私は視差をよく使うので、これは残念です。背景を修正して引き続き使用できるように、なぜこれが起こっているのか、それを回避する方法はありますmix-blend-modeか?

psfixedここからを削除 -->background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center fixed;すると、正常に動作することがわかります。ただし、背景はスクロールとともに移動します:(

次に例を示します。

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect2">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect1">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect4">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect5">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect6">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect7">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect8">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect9">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect10">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect11">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect12">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect13">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect14">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect15">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect16">BRAZIL</h1></div>
  </div>
  <div class="row">
      <div class="col-xs-4 col-xs-push-4"><h1 class="effect17">BRAZIL</h1></div>
  </div>

CSS:

@import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center fixed;
  background-size: cover;
  height:100%;
}
h1 {
  font-family: raleway, sans-serif;
  text-align:center;
  font-size: 75px;
  line-height: 60px;
  padding: 10px;
  background: #333;
  color: white;
}

.effect2{ mix-blend-mode: normal;}
.effect1{ mix-blend-mode: multiply;}
.effect4{ mix-blend-mode: screen;}
.effect5{ mix-blend-mode: overlay;}
.effect6{ mix-blend-mode: darken;}
.effect7{ mix-blend-mode: lighten;}
.effect8{ mix-blend-mode: color-dodge;}
.effect9{ mix-blend-mode: color-burn;}
.effect10{ mix-blend-mode: hard-light;}
.effect11{ mix-blend-mode: soft-light;}
.effect12{ mix-blend-mode: difference;}
.effect13{ mix-blend-mode: exclusion;}
.effect14{ mix-blend-mode: hue;}
.effect15{ mix-blend-mode: saturation;}
.effect16{ mix-blend-mode: color;}
.effect17{ mix-blend-mode: luminosity;}

これは私が見ているものです：

このCODEPENを使用できます