如何消除纯CSS加载器（仅Firefox）上出现的细直径线

问题描述 #

我使用以下纯CSS加载器，它具备中心透明、适配所有背景、仅需单个HTML元素的优势，但在Firefox浏览器中会出现一条细直径线，请问该如何消除？

原代码示例 #

CSS代码

.css-loader {
  position: fixed;
  z-index: 9999;
  top: calc(50% - 55px);
  left: calc(50% - 55px);
  width: 110px;
  height: 110px;
  animation: loader-spin 1s linear infinite;
  border-radius: 50%;
  background: linear-gradient(to top, transparent, #f5854c) 0 0/50% 100% no-repeat;
  -webkit-mask: var(--mask);
  --mask: radial-gradient(farthest-side, transparent calc(100% - 16px - .5px), #000 calc(100% - 16px + .5px));
  mask: var(--mask);
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

HTML代码

<div class="css-loader"></div>

解决方案 #

Firefox中的细线是mask径向渐变过渡的渲染精度问题导致的，可通过以下两种方式解决：

方法1：调整渐变过渡区间 #

简化--mask变量中的像素偏移值，扩大过渡范围，避免引擎计算冲突：

--mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px + 1px));

方法2：添加mask边界重置 #

给加载器元素添加mask-border属性，强制Firefox忽略默认的mask边界渲染瑕疵：

.css-loader {
  /* 原有代码保留 */
  mask-border: 0;
  -webkit-mask-border: 0;
}

优化后的完整CSS代码 #

.css-loader {
  position: fixed;
  z-index: 9999;
  top: calc(50% - 55px);
  left: calc(50% - 55px);
  width: 110px;
  height: 110px;
  animation: loader-spin 1s linear infinite;
  border-radius: 50%;
  background: linear-gradient(to top, transparent, #f5854c) 0 0/50% 100% no-repeat;
  -webkit-mask: var(--mask);
  --mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px + 1px));
  mask: var(--mask);
  mask-border: 0;
  -webkit-mask-border: 0;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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