CSS中conic-gradient色标过多致渲染异常的原因是什么？

问题表现 #

使用conic-gradient作为背景时，预期渲染36个1度宽的彩色硬边辐条、间隔9度透明段（合计72个色标），实际出现部分辐条缺失：

• Firefox环境下仅显示靠后的红色、紫色辐条，色标数量减少到32个时可正常渲染
• Chrome环境下仅显示蓝色、红色、黄色、紫色辐条，色标减少到32个时仍存在渲染错误
  按代码逻辑，20度位置应为橙色、30度为蓝色、40度为红色、50度为黄色、60度为紫色，和实际渲染结果不符。

问题复现代码 #

body {
    width: 10rem;
    height: 20rem;
    background: #666 conic-gradient(
        from 0deg at 50% 50%,
        lime 0deg 1deg,
        transparent 1deg 10deg,
        lime 10deg 11deg,
        transparent 11deg 20deg,
        orange 20deg 21deg,
        transparent 21deg 30deg,
        blue 30deg 31deg,
        transparent 31deg 40deg,
        red 40deg 41deg,
        transparent 41deg 50deg,
        yellow 50deg 51deg,
        transparent 51deg 60deg,
        purple 60deg 61deg,
        transparent 61deg 70deg,
        lime 70deg 71deg,
        transparent 71deg 80deg,
        lime 80deg 81deg,
        transparent 81deg 90deg,
        lime 90deg 91deg,
        transparent 91deg 100deg,
        lime 100deg 101deg,
        transparent 101deg 110deg,
        lime 110deg 111deg,
        transparent 111deg 120deg,
        lime 120deg 121deg,
        transparent 121deg 130deg,
        lime 130deg 131deg,
        transparent 131deg 140deg,
        lime 140deg 141deg,
        transparent 141deg 150deg,
        lime 150deg 151deg,
        transparent 151deg 160deg,
        lime 160deg 161deg,
        transparent 161deg 170deg,
        lime 170deg 171deg,
        transparent 171deg 180deg,
        lime 180deg 181deg,
        transparent 181deg 190deg,
        lime 190deg 191deg,
        transparent 191deg 200deg,
        lime 200deg 201deg,
        transparent 201deg 210deg,
        lime 210deg 211deg,
        transparent 211deg 220deg,
        lime 220deg 221deg,
        transparent 221deg 230deg,
        lime 230deg 231deg,
        transparent 231deg 240deg,
        lime 240deg 241deg,
        transparent 241deg 250deg,
        lime 250deg 251deg,
        transparent 251deg 260deg,
        lime 260deg 261deg,
        transparent 261deg 270deg,
        lime 270deg 271deg,
        transparent 271deg 280deg,
        lime 280deg 281deg,
        transparent 281deg 290deg,
        lime 290deg 291deg,
        transparent 291deg 300deg,
        lime 300deg 301deg,
        transparent 301deg 310deg,
        lime 310deg 311deg,
        transparent 311deg 320deg,
        lime 320deg 321deg,
        transparent 321deg 330deg,
        lime 330deg 331deg,
        transparent 331deg 340deg,
        lime 340deg 341deg,
        transparent 341deg 350deg,
        lime 350deg 351deg,
        transparent 351deg 360deg
    );
    background-repeat: no-repeat;
}

<div></div>

问题成因 #

该问题不是CSS规范定义的conic-gradient色标数量上限导致的，本质是浏览器渲染引擎的光栅化精度限制与亚像素抗锯齿计算误差共同引发的实现bug：

• 浏览器渲染渐变时不会逐角度逐像素计算颜色值，会先将渐变采样为固定分辨率的中间色带位图，再拉伸映射到目标元素上。Chrome和Firefox对锥形渐变的默认采样精度都未达到1度级别，当单个硬边色段宽度仅为1度时，小于采样步长的色段会在采样阶段被直接丢弃，或与相邻透明色段合并。
• 硬边色标的边界处浏览器会自动做亚像素抗锯齿处理。测试用的元素尺寸仅为10rem*20rem，1度宽的辐条在靠近圆心的位置实际占屏宽度不足1像素，抗锯齿计算时会将这类过细色段的透明度算为0，直接表现为不可见。
• 不同浏览器表现差异来自引擎采样阈值的区别：Firefox的锥形渐变默认采样阈值更高，所以色标数量超过32个时就会丢弃角度更靠前的小尺寸色段；Chrome采样精度稍高，但仍未覆盖1度级别的细色段，因此靠前的橙色、青柠色辐条仍会丢失。

验证方法 #

可以通过两个简单测试确认上述成因：

• 将元素宽高放大到1000px以上，原本消失的辐条会重新显示——大尺寸下1度角对应的像素宽度超过采样阈值，不会被采样逻辑丢弃。
• 将所有1度宽的彩色辐条调整为2度以上宽度，即便保留全部72个色标，两个浏览器都可正常渲染所有辐条。

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