CSS background-attachment: fixed; breaks when Chrome tab is dragged to larger monitor

Question

I'm trying to implement a parallax effect and it's working perfectly in my smaller monitor but when I drag the tab over to my larger main monitor to see it there it immediately doesn't work. The image, instead of remaining fixed, scrolls with the rest of the site. When I drag it back it starts working again. I;m very confused, this is the same instance of chrome so why would this be happening. Is there a way to fix this? I have tried it in Edge and it works fine there.

Also, I am using 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>