CSS linear-gradient设为0/180度时出现意外重复条纹求助

问题场景 #

使用linear-gradient(45deg, white 0%, grey 100%)时渐变表现正常，但将角度改为0°或180°时，背景意外出现重复条纹——并非刻意使用repeating-linear-gradient()的效果，且仅在角度为0°/180°时触发该问题。

问题原因 #

这是浏览器渲染水平方向线性渐变时的精度偏差问题：当渐变角度为0°（从左到右）或180°（从右到左），且色标设置为0%到100%时，浏览器的像素对齐计算可能出现细微误差，导致渐变边缘的像素被重复渲染，看起来像条纹。斜向渐变（如45°）的像素计算逻辑不同，因此不会出现这类问题。

解决方案 #

下面几种方法都能解决这个问题，按需选择：

• 调整色标结束位置：把结束色标的100%改为calc(100% + 1px)，强制渐变覆盖超出容器1像素，避免边缘重复：

  body {
    background-image: linear-gradient(0deg, white 0%, grey calc(100% + 1px));
  }
  

• 使用方向关键字替代角度：用to right（对应0°）或to left（对应180°）代替角度值，浏览器对方向关键字的渲染逻辑更稳定：

  body {
    background-image: linear-gradient(to right, white 0%, grey 100%);
  }
  

• 明确背景填充规则：强制背景不重复并占满容器，消除浏览器的默认填充歧义：

  body {
    background-image: linear-gradient(0deg, white 0%, grey 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 100vh; /* 确保body铺满视口高度 */
  }
  

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