CSS渐变页面缩放后出现条纹断层问题求解

我需要为页面设置CSS渐变背景，顶部添加一个固定头部（内容在其后方滚动），且头部需延续背景渐变效果。但实现后，缩放页面时渐变会出现条纹断层，只有刷新页面才能恢复正常。

相关代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <style>
    body{padding: 0;margin:0;}
        
    .back{width:100vw;height:100vh;background: radial-gradient(ellipse,#fff  0%, #000 100%);overflow: hidden;position:fixed;top:0;left:0;z-index: -1}
        
    .top{width: 100vw;height: 11.5vw;background: radial-gradient(ellipse at 50% 50vh,#fff  0%, #000 100%); position: fixed;top: 0;left: 0;z-index: 10}
  </style>
</head>

<body>
  <div class="back"></div>
  <div class="top"></div>
</body>
</html>

效果说明：正常状态下渐变平滑过渡；缩放页面后，渐变出现明显的条纹断层，衔接处错位。

问题原因 #

1. 双渐变元素定位不匹配：你用了两个独立的渐变元素（.back和.top），其中.top的渐变垂直定位用了固定的50vh（视口高度的50%），而.back的渐变默认以自身元素中心（即视口中心）定位。缩放页面时，浏览器不会自动重新计算两个渐变的相对位置，导致衔接处错位，产生条纹。
2. 浏览器渲染缓存机制：浏览器会缓存渐变的渲染结果，缩放时如果没有触发重绘，就会沿用旧的渲染数据，加剧断层问题。

解决方法 #

方法1：合并渐变（推荐） #

不需要为头部单独设置渐变，直接让头部透明，复用背景层的渐变，从根源避免衔接问题：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <style>
    body{padding: 0;margin:0;}
        
    .back{
      width:100vw;
      height:100vh;
      background: radial-gradient(ellipse,#fff  0%, #000 100%);
      position:fixed;
      top:0;
      left:0;
      z-index: -1
    }
        
    .top{
      width: 100vw;
      height: 11.5vw;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background: transparent;
      /* 可根据需求添加头部内容样式 */
      color: #fff;
      line-height: 11.5vw;
      text-align: center;
    }
    
    /* 滚动内容需避开头部高度 */
    .content{
      padding-top: 11.5vw;
      height: 200vh;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="back"></div>
  <div class="top">固定头部</div>
  <div class="content">滚动内容区域</div>
</body>
</html>

方法2：统一渐变定位并触发重绘 #

如果必须保留头部的独立渐变，可统一两个渐变的定位规则，并添加小动画触发浏览器重绘：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <style>
    body{padding: 0;margin:0;}
        
    .back{
      width:100vw;
      height:100vh;
      background: radial-gradient(ellipse,#fff  0%, #000 100%);
      position:fixed;
      top:0;
      left:0;
      z-index: -1;
      background-attachment: fixed; /* 渐变相对视口定位 */
      animation: refresh 0.1s infinite; /* 触发重绘 */
    }
        
    .top{
      width: 100vw;
      height: 11.5vw;
      background: radial-gradient(ellipse,#fff  0%, #000 100%); /* 和背景用相同渐变规则 */
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background-attachment: fixed; /* 渐变相对视口定位 */
      animation: refresh 0.1s infinite; /* 触发重绘 */
    }

    /* 微小动画触发重绘，无视觉影响 */
    @keyframes refresh {
      0% { transform: translateZ(0); }
    }
  </style>
</head>

<body>
  <div class="back"></div>
  <div class="top"></div>
</body>
</html>

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