Firefox浏览器线性与径向渐变渲染异常问题求助

问题原因 #

Firefox对hwb颜色格式搭配负百分比的渐变参数存在兼容性问题，再加上你设置了background-size:200% 200%拉伸背景，直接放大了渲染精度误差，导致出现明显的断层线条。另外，现代浏览器已经不需要-moz-这类前缀，加了也起不到作用。

修复方案 #

方案1：替换为RGB/HSL颜色格式

将hwb颜色转换为浏览器支持更一致的RGB值，同时移除不必要的背景拉伸设置：

body {
  height: 100vh;
  width: 100vw; /* 原100vh错误，全屏宽度需用vw */
  background-image: radial-gradient(rgb(89, 89, 89), rgb(33, 33, 33));
  background-position: bottom;
}

方案2：明确径向渐变参数（保留hwb格式）

如果坚持使用hwb颜色，可明确渐变的圆心位置与范围参数，避免模糊的负百分比写法：

body {
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient(at bottom center, hwb(0 35% 65%) 0%, hwb(0 13% 87%) 100%);
  background-attachment: fixed; /* 固定背景减少重绘误差 */
}

额外注意事项 #

• 原代码中width:100vh是错误写法，实现全屏宽度应使用100vw，否则宽高会随视口高度变化，导致背景变形；
• background-size:200% 200%会强制拉伸背景，容易放大浏览器间的渲染精度差异，非必要建议移除。

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