title: CSS/Chrome white blocks appear when scrolling
body: <p>i'm recently experiencing an issue with <strong>white blocks appearing on the top/bottom of site whenever i scroll</strong> it a greater bit. The white blocks are part of <strong>body background</strong>, because changing body backgroundcolor makes blocks change color too. </p>
  
  <p>I have already tried <strong>setting opacity for body</strong> but this gave no effect at all... Any ideas what could possibly be going wrong? Or maybe i just have too heavy transition/fade content so that rendering doesn't work smooth?</p>
  
  <p>Here's the screenshot of the issue, pretty hard to catch on ss since it only happens for half sec when scrolling. The block is indicated by red arrows.
  <a href="https://i.stack.imgur.com/F0FMu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F0FMu.jpg" alt="white block indicated by red arrows"></a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I'd actually post parts of my css file, maybe this would bright any clue:</p>
  
  <pre><code>html, body {
      height: 100%;
      position: static;
      overflow-x:hidden;
      -webkit-transform: translate3d(0, 0, 0);
      background-color: rgba(255, 255, 255, 0.06);
      transform: translate3d(0,0,0);
  }
  .heroEffects .bg {
      -webkit-backface-visibility: hidden;
      transform: scale(1);
      -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
      -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
      box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      transform: translate3d(0,0,0);
  }
  .bgimg {
      -webkit-backface-visibility: hidden;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      position: absolute;
      background-repeat: no-repeat;
      background-position: center center;
      transform: scale(1);
      overflow: hidden;
      -webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
      -moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
      box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-image: url("../img/gallery/slonecz.jpg");
      animation-name: backgroundchangeFadeInOut;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: 15s;
      animation-delay: 5s;
      -webkit-animation-delay: 5s
      -webkit-animation-name: backgroundchangeFadeInOut;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration: 15s;
      transform: translate3d(0,0,0);
  }
  
  @keyframes backgroundchangeFadeInOut {
      0% {
         background-image: url("../img/gallery/slonecz.jpg");
      }
      15% {
         background-image: url("../img/gallery/slonecz.jpg");
      }
      30% {
         background-image: url("../img/gallery/slonecz.jpg");
      }
      42% {
         background-image: url("../img/gallery/slonecz.jpg");
      }
      50% {
         background-image: url("../img/gallery/motyl.jpg");
      }
      68% {
         background-image: url("../img/gallery/motyl.jpg");
      }
      80% {
         background-image: url("../img/gallery/motyl.jpg");
      }
      95% {
         background-image: url("../img/gallery/motyl.jpg");
      }
      100% {
         background-image: url("../img/gallery/slonecz.jpg");
     }
  }
  
  .heroEffects .shade {
      opacity: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 3;
      height: 100vh;
      position: fixed;
      width: 100%;
  }
  </code></pre>
  
  <p>And here's Vimeo vid, the screen recorder seems to be on top and you can actually see what happens when the browser with this site is in the background... <a href="https://vimeo.com/198493320" rel="nofollow noreferrer">https://vimeo.com/198493320</a></p>