CSS/Chrome white blocks appear when scrolling

Question

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.

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

I have noticed this behaviour before. I think it is performance and the translateZ(0) hack might help. Check [this question](https://stackoverflow.com/questions/32417663/white-area-on-fixed-background-when-scrolling-on-ios) with the same issue. — Alvaro, Jan 08 '17 at 17:29
Hey Alvaro, thanks for response! Unfortunatelly this wouldn't work in my case... Still same problem, i'd even say i can actually see more white space but this might not be true huh. What actually might give another clue is that whenever i open another window (for example Brackets) on top of the site, it automagically shows the white space too from time to time. — Damian Doman, Jan 08 '17 at 17:34
@avoliva actually yes - changing image resolution so that browser doesnt have to apply keyframes to huge image made it work much more slightly — Damian Doman, Jun 17 '19 at 20:07

score 2 · Accepted Answer · answered Jul 11 '18 at 10:34

2

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

body {
   overflow: hidden;
}

answered Jul 11 '18 at 10:34

Ylama

2,449
2
25
50

score 2 · Answer 2 · answered Jul 31 '19 at 13:06

2

this works for me on chrome 76.0.3809.87

overflow: auto;

hope it can help.

answered Jul 31 '19 at 13:06

Miya

21
1

2

There are many css selectors in question. Where have you put that `overflow: auto;`? – barbsan Jul 31 '19 at 13:34

CSS/Chrome white blocks appear when scrolling

2 Answers2