CODEWITHSUNDEEP
javascripthtmlcssreactjs
James Lee
James Lee

Reputation: 926

How do I fix white flickering on an animated background image?

I am currently trying to create an animated background image. However, every time I scroll, I get a white flickering on top/bottom of the screen depending how I scroll. 

.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>

I noticed this is only a problem in google chrome since it works smoothly in safari. Anyone have any idea how to fix this? Thank you!

Upvotes: 2

Views: 946

Answers (1)

Temani Afif
Temani Afif

Reputation: 273551

Do it differently relying on transform to have better result:

.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>

Upvotes: 1

Related Questions