Search code examples
cssbackgroundcss-transitionsblock

CSS/Chrome white blocks appear when scrolling

i'm recently experiencing an issue with white blocks appearing on the top/bottom of site whenever i scroll it a greater bit. The white blocks are part of body background, because changing body backgroundcolor makes blocks change color too.

I have already tried setting opacity for body 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?

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. white block indicated by red arrows

EDIT:

I'd actually post parts of my css file, maybe this would bright any clue:

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%;
}

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... https://vimeo.com/198493320

Solution

  • In my case using overflow: hidden; on body worked.

    body {
   overflow: hidden;
}