css - Using translateX on overflowing div is causing white space flickering in FireFox -

i'm making site background gradient animates. it, i'm making large gradient (~10,000px wide) pattern repeats twice , using transforms inside keyframe animation translate 50% before repeating. works great in chrome super buggy in firefox. firefox can handle translation (i checked adjusting manually) chokes when put inside of animation.

here visual of how looks in chrome vs firefox

chrome http://i.imgur.com/ii6he84.gifv

firefox http://i.imgur.com/nf8t478.gifv

relevant html & scss (i have autoprefixer running...)

@keyframes shift-bg {    0% { transform: translatex(0%); }    100% { transform: translatex(-50%); }  }    main {    overflow-x: hidden;  }    .section {    min-height: 100vh;  }    .home-background {    position: absolute;    top: 0;    bottom: 0;    left: 0;    width: 10000px;    background: -webkit-gradient(linear,left top,right top,color-stop(0,#a4c4d1),color-stop(16%,#fec746),color-stop(33%,#a3d282),color-stop(50%,#a4c4d1),color-stop(66%,#fec746),color-stop(83%,#a3d282),color-stop(100%,#a4c4d1));  background: -webkit-linear-gradient(10deg,#a4c4d1 0,#fec746 16%,#a3d282 33%,#a4c4d1 50%,#fec746 66%,#a3d282 83%,#a4c4d1 100%);  background: -o-linear-gradient(10deg,#a4c4d1 0,#fec746 16%,#a3d282 33%,#a4c4d1 50%,#fec746 66%,#a3d282 83%,#a4c4d1 100%);  background: linear-gradient(80deg,#a4c4d1 0,#fec746 16%,#a3d282 33%,#a4c4d1 50%,#fec746 66%,#a3d282 83%,#a4c4d1 100%);  filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#a4c4d1', endcolorstr='#a3d282', gradienttype=1 )    will-change: transform;    animation-name: shift-bg;    animation-duration: 15s;    animation-timing-function: linear;    animation-iteration-count: infinite;  }

<main>          <section id="home">      <div class="home-background"></div>    </section>  </main>

anyone dealt before? there fix firefox? otherwise i'll try different solution together..