CSS动态背景滚动时出现白色闪烁视觉Bug求助

问题描述 #

开发作品集网站时，滚动页面在所有测试浏览器中出现白色闪烁现象；在CodePen环境中滚动伪影为黑色，寻求解决方法（本人为CSS初学者）。

代码片段 #

CSS代码 #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font-size: 100%;
}

body{
    background: linear-gradient(-45deg, #ee7752, #550c28, #0a5c79, #056d55);
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

header{
    font-family: 'Yellowtail', cursive;
    background: #FCA311;
    background: linear-gradient(to right, #FCA311 0%, #ff00c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
    margin:0 3%;
    padding:0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1{
    font-size: 10vw;
    font-weight: 700;
    letter-spacing: 6px;
}

header h2{
    font-size: 3vw;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: -1em;
}

.logo{
    text-shadow: rgb(0 0 0 / 20%) 2px 6px 5px, rgb(255 255 255 / 0%) 0 -4px 30px;
}

nav{
    font-family: 'Yellowtail', cursive;
    display: flex;
    flex-direction: row;
}

nav ul{
    list-style: none;
}

nav ul li{
    font-size: 2rem;
    color:#FCA311;
    display: inline;
    padding: .5em;
}

.container{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.headshot{
    margin-top:3em;
    width: 243px;
    height: 232px;
    border-radius:50%;
    box-shadow:
    inset 0 0 50px #fff,      /* inner white */
    inset 20px 0 80px #f0f,   /* inner left magenta short */
    inset -20px 0 80px #0ff,  /* inner right cyan short */
    inset 20px 0 300px #f0f,  /* inner left magenta broad */
    inset -20px 0 300px #0ff, /* inner right cyan broad */
    0 0 50px #fff,            /* outer white */
    -10px 0 80px #f0f,        /* outer left magenta */
    10px 0 80px #0ff;         /* outer right cyan */
}

.headshot_section{
    margin-right: 15%;
}

.introduction{
    color: white;
    font-family: 'Yellowtail';
    margin:0 50px;
    font-size:3.5vw;
}

#name_decor{
    background: linear-gradient(to right, #FCA311 0%, #ff00c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
    padding-left:4px;
}

.statement{
    font-family: 'Roboto';
    width: 100%;
    margin:10em 0;
}

.statement p{
    color: white;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:2em;
    text-align: center;
    font-size: 3em;
    width: 50%;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Max Burleigh: The Official Portfolio</title>
    <link rel="stylesheet" href="index.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Yellowtail&display=swap');
    </style>       
</head>
<body>
    <header>
        <div class="logo">
            <h1>max burleigh</h1>
            <h2>my official site</h2>
        </div>
        <nav>
            <ul>
                <li>Home</li>
                <li>About Me</li>
                <li>Portfolio</li>
                <li>Contact</li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="container">
            <section class="introduction">
                <span>Hi, my name is <span id="name_decor">Max Burleigh.</span><br>Welcome to my site.</span>
            </section>
            <section class="headshot_section">
                <img class="headshot" src="https://images.unsplash.com/photo-1656577028224-0660607d1de3?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg3NzM3ODc&ixlib=rb-1.2.1&q=80" alt="">
            </section>
        </div>
        <div class="container">
            <section class="statement">
                <p>I am passionate about growth.</p> <p>I believe that whatever you want out of this life: if you work hard enough, you can achieve it.</p>
            </section>
        </div>
    </main>


</body>
</html>

解决方案 #

滚动时的闪烁/伪影通常是因为浏览器滚动时重新渲染带动画的渐变背景，导致渲染延迟。可以通过开启硬件加速优化渲染，修改body的CSS如下：

body{
    background: linear-gradient(-45deg, #ee7752, #550c28, #0a5c79, #056d55);
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
    /* 添加以下属性开启硬件加速，减少渲染延迟 */
    will-change: background-position;
    backface-visibility: hidden;
    transform: translateZ(0);
}

原理说明 #

• will-change: background-position：提前告知浏览器元素的背景位置会变化，让浏览器提前做好渲染优化
• backface-visibility: hidden：隐藏元素背面，强制浏览器使用GPU渲染该元素
• transform: translateZ(0)：触发GPU加速，将元素渲染提升到GPU层，减少滚动时的重绘操作

这些属性可以有效解决滚动时的背景渲染延迟问题，消除白色/黑色闪烁伪影。

内容的提问来源于stack exchange，提问作者Max Burleigh