Как исправить белое мерцание на анимированном фоновом изображении?

Question

Я сейчас пытаюсь создать анимированное фоновое изображение. Однако каждый раз, когда я прокручиваю, я вижу белое мерцание вверху / внизу экрана в зависимости от того, как я прокручиваю.

.hi {
 background-image: url("http://www.bsec-organization.org/Resources/images/mainSlider/mainSlider02.jpg");
 height: 5000px;
 background-repeat: repeat;
  animation: animatedBackground 500s linear infinite;
}
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 0;
  }
}

<div class="hi">
  hi
</div>

Я заметил, что это проблема только в google chrome, так как в сафари он работает плавно. Кто-нибудь знает, как это исправить? Спасибо!

Answer 1

Сделайте это иначе, полагаясь на преобразование, чтобы получить лучший результат:

.hi {
  background-image: url("http://www.bsec-organization.org/Resources/images/mainSlider/mainSlider02.jpg");
  height: 5000px;
  background-repeat: repeat;
  position:relative;
  overflow:hidden;
  z-index:0;
}

.hi:before {
  content: "";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:-100%;
  bottom:0;
  background:inherit;
  animation: animatedBackground 50s linear infinite;
}

@keyframes animatedBackground {
  to {
    transform:translateX(-50%);
  }
}

<div class="hi">
  hi
</div>