滚动时会显示CSS / Chrome白色块

Question

我最近遇到了一个问题，每当我滚动更大一点时，网站顶部/底部会出现白色块。白色块是 body background 的一部分，因为更改body backgroundcolor会使块也改变颜色。

我已经尝试过为身体设置不透明度，但这根本没有效果......任何想法可能会出错？或者也许我只是有太重的过渡/淡入淡出内容，这样渲染不能顺利进行？

这里是问题的屏幕截图，非常难以捕捉到ss，因为它只在滚动时发生半秒。该块用红色箭头表示。

修改

我实际上发布了我的css文件的部分内容，也许这会明白任何线索：

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

在这里的Vimeo视频中，屏幕录像机似乎位于顶部，你可以看到当这个网站的浏览器在后台时会发生什么...... https://vimeo.com/198493320

Answer 1

以我为例，在身体上使用overflow: hidden;。

body {
   overflow: hidden;
}

Answer 2

这适用于Chrome 76.0.3809.87

overflow: auto;

希望它可以提供帮助。