滚动时出现 CSS/Chrome 白色 block

Question

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

我已经试过了设置 body 的不透明度 但这根本没有任何影响......有什么想法可能会出错吗？或者也许我只是有太重的过渡/淡入淡出内容，所以渲染不能顺利进行？

这是问题的屏幕截图，很难在 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 上工作。

body {
   overflow: hidden;
}