CSS背景附加：固定；将Chrome标签页拖到较大的显示器时会中断

Question

我正在尝试实现视差效果，并且它在较小的显示器中可以正常工作，但是当我将选项卡拖到较大的主显示器上以查看它时，它立即失效。该图像将与网站的其余部分一起滚动，而不是固定不变。当我将其拖回时，它将再次开始工作。我很困惑，这是chrome的同一实例，所以为什么会发生这种情况。有没有办法来解决这个问题？我已经在Edge中尝试过了，并且在那工作正常。

此外，我正在使用Angular 6。

.container {
  margin:0;
  padding:0;
}
#box1 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/scotchGlass.jpg");
  background-size: cover;
  display: table;
  background-attachment: fixed;
}
#box2 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/scotchGlass.jpg");
  background-size: cover;
  display: table;
}
#box3 {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/scotchGlass.jpg");
  background-size: cover;
  display: table;
}
h1 {
  font-family: arial black;
  font-size: 50px;
  color: white;
  margin: 0px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">


  <div id="box1">
    <h1>Hello</h1>
  </div>
  <div id="box2">
    <h1>Hello</h1>
  </div>
  <div id="box3">
    <h1>Hello</h1>
  </div>
</div>