CSS background-attachment: исправлено;ломается при перетаскивании вкладки Chrome на монитор большего размера - PullRequest
Новая
       25

CSS background-attachment: исправлено;ломается при перетаскивании вкладки Chrome на монитор большего размера

0 голосов
/ 23 сентября 2018

Я пытаюсь реализовать эффект параллакса, и он отлично работает на моем меньшем мониторе, но когда я перетаскиваю вкладку на основной монитор большего размера, чтобы увидеть его там, он сразу же не работает.Изображение, вместо того, чтобы оставаться фиксированным, прокручивается вместе с остальной частью сайта.Когда я перетаскиваю его обратно, он снова начинает работать.Я очень растерялся, это тот же самый пример 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>
...