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

user_13476728 0
Viewed 607

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!

reactjs css html javascript
1 Answers

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>

user_86203330
Related