background-attachment: исправлено перемещение назад в Chrome - PullRequest
Новая
       40

background-attachment: исправлено перемещение назад в Chrome

0 голосов
/ 02 июня 2018

Я испытываю очень странную ошибку с background-position: fixed в Chrome (v67 на macOS), когда фоновое изображение фактически перемещается вверх при прокрутке, а не fixed.

Вот кодовая ручкавопроса: https://codepen.io/alexismo/pen/xzwmRE и вот его рисунок: https://gfycat.com/PolishedHarshAfricangroundhornbill

Содержание страницы структурировано как 

<body>
    <div class="background-image"></div>
    <div class="rest-of-the-site"></div>
</body>

.background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    z-index: -1;
}

Ответы [ 7 ]

0 голосов
/ 12 июля 2018

Это ошибка в Google Chrome 67. Это исправит, попробуйте: 

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

Больше на: https://victorfont.com/workaround-for-chrome-67-parallax-bug/

0 голосов
/ 18 июля 2018

У меня была та же проблема, и она связана с тем фактом, что в иерархии правил CSS есть «позиция: абсолютная», которая находится выше вашей «позиции: фиксированная».Ищите абсолютное позиционирование, которое вызывает вашу проблему.Что касается меня, я вошел в Инструменты разработчика Chrome и снял флажки, в которых позиции были противопоставлены «фиксированным», пока я не определил проблему.Мой был в куске кода Javascript.Надеюсь, это кому-нибудь поможет.

0 голосов
/ 29 июня 2018

Сначала примените position: relative к тегу body , так как он является предком вашего фона фонового изображения.

Затем установите высоту .background-imageдо 100vh.Это сделает его высотой окна, но это не всегда будет видно. 

/* Since the body element is the parent of the .background-image, we need to set its position to relative */
body {
  position: relative;
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100vh; /* be exactly the height of the viewport, no bigger */
  top: 0;
  left: 0;
  background-image: url('http://alexismorin.com/images/watertown.jpg');
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

p {
  color: #333;
}
<div class="background-image"></div>
<div>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p><p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p><p>
    Site is here
  </p><p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
</div>
0 голосов
/ 07 июня 2018

Я обычно использую вместо этого псевдоэлемент.Попробуйте это: 

body:after{
    content: '';
    background-image: url('http://alexismorin.com/images/watertown.jpg');
    background-size: cover;
    opacity: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
}
0 голосов
/ 07 июня 2018

Это похоже на ошибку в последней версии Chrome.Это не предполагаемое поведение.Я бы рекомендовал подать отчет об ошибке, если он еще не введен.

0 голосов
/ 02 июня 2018

Работает желаемым образом.Для большей ясности просмотрите это

Хотя то, чего вы хотите достичь, можно сделать, немного подправив код: 

.background-image {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('http://alexismorin.com/images/watertown.jpg');
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

p {
  color: #333;
}
<div class="background-image">
  <div>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
  </div>
</div>
0 голосов
/ 02 июня 2018

это не ошибка, вот как должно работать background-attachment.Если вы хотите, чтобы изображение оставалось на экране, вы должны использовать position: fixed;

...