Firefox中CSS Spinner加载动画出现伪影的原因及解决方法

我用CSS自定义了一款美观的Spinner加载动画，在除Firefox外的所有浏览器中表现良好，但在Firefox中出现伪影。经排查发现，Firefox对div旋转同时polygon缩放的动画兼容不佳，关闭其中任一动画可解决问题，但我希望同时保留两种效果。请问有人能解释原因并提供修复方法吗？或至少指明解决方向。

原代码 #

<style>
  .loader {
    display: inline-flex;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    outline: none;
    position: relative;
    animation: rotate 1s linear infinite
  }
  
  .loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 0.15em solid;
    animation: prixClipFix 1.8s linear infinite;
  }
  
   :is(h1, h2, h3, h4, h5) .loader::before {
    border-width: 0.1em;
  }
  
  @keyframes rotate {
    100% {
      transform: rotate(360deg)
    }
  }
  
  @keyframes prixClipFix {
    0% {
      clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
    }
    25% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }
    50% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
    75% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }
    100% {
      clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
    }
  }
</style>
<div>
  <!-- <div class="spin"></div> -->
  <h1>Loading
    <div class="loader"></div>
  </h1>
  <h2>Loading
    <div class="loader"></div>
  </h2>
  <h3>Loading
    <div class="loader"></div>
  </h3>
  <h4>Loading
    <div class="loader"></div>
  </h4>
  <h5>Loading
    <div class="loader"></div>
  </h5>
  Loading
  <div class="loader"></div>
</div>

原因解释 #

Firefox的渲染引擎在处理父元素旋转动画和伪元素clip-path动画的组合时，对两种复合动画的同步优化不足。简单来说，元素旋转的几何变换与clip-path的路径变换没有在渲染层中正确协同，导致像素渲染错位，产生伪影。

修复方案 #

方案1：分离动画到独立元素（最稳定） #

把旋转和clip-path动画拆分到两个独立元素中，让它们处于不同的渲染上下文，从根源避免冲突：

<style>
  .loader {
    display: inline-flex;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    outline: none;
    position: relative;
    animation: rotate 1s linear infinite;
  }
  
  .loader-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.15em solid;
    animation: prixClipFix 1.8s linear infinite;
  }
  
  :is(h1, h2, h3, h4, h5) .loader-inner {
    border-width: 0.1em;
  }
  
  @keyframes rotate {
    100% {
      transform: rotate(360deg)
    }
  }
  
  @keyframes prixClipFix {
    0% {
      clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
    }
    25% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }
    50% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
    75% {
      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }
    100% {
      clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
    }
  }
</style>
<div>
  <h1>Loading
    <div class="loader">
      <div class="loader-inner"></div>
    </div>
  </h1>
  <h2>Loading
    <div class="loader">
      <div class="loader-inner"></div>
    </div>
  </h2>
  <h3>Loading
    <div class="loader">
      <div class="loader-inner"></div>
    </div>
  </h3>
  <h4>Loading
    <div class="loader">
      <div class="loader-inner"></div>
    </div>
  </h4>
  <h5>Loading
    <div class="loader">
      <div class="loader-inner"></div>
    </div>
  </h5>
  Loading
  <div class="loader">
    <div class="loader-inner"></div>
  </div>
</div>

方案2：启用硬件加速（无需修改DOM） #

如果不想调整DOM结构，给伪元素添加硬件加速相关属性，强制Firefox将动画元素放入独立合成层，减少渲染冲突：

修改.loader::before的样式，新增以下代码：

backface-visibility: hidden;
transform: translateZ(0);
will-change: clip-path;

修改后的完整CSS片段：

.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 0.15em solid;
  animation: prixClipFix 1.8s linear infinite;
  /* 新增硬件加速属性 */
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: clip-path;
}

效果说明 #

两种方案都能在Firefox中同时保留旋转和clip-path动画，且消除伪影。方案1通过分离渲染上下文彻底避免冲突，兼容性更稳定；方案2更简洁，适合不想改动DOM结构的场景。

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