Firefox中圆形渲染异常问题（保留container的transform属性求解）

现有以下HTML和CSS结构：

.circle {
  width: 4px;
  height: 4px;
  background: blue;
  border-radius: 50%;
  margin-top: 10px;
}

.container {
  width: 600px;
  height: 600px;
  transform: scale(0.3065);
}

<div id="root">
  <div style="width: 100vw; height: 100vh;">
    <div class="container">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
</div>

在Firefox浏览器中，.container的transform: scale(0.3065)会导致内部的.circle圆形出现渲染异常（如形状失真、边缘模糊等）。尝试过给.circle单独设置宽高8px再用transform: scale(0.5)缩放，问题仍然存在。需要在保留.container的transform属性的前提下解决该渲染问题。

以下几种方法可以解决Firefox中的这个渲染异常：

• 方法1：给圆形元素触发硬件加速
  给.circle添加transform: translateZ(0)，强制浏览器为该元素创建独立的GPU渲染层，提升缩放后的渲染精度：

  .circle {
    width: 4px;
    height: 4px;
    background: blue;
    border-radius: 50%;
    margin-top: 10px;
    transform: translateZ(0);
  }
  

• 方法2：使用超大圆角值替代50%
  将border-radius: 50%替换为border-radius: 9999px，避免小尺寸元素下浏览器对圆角的计算误差：

  .circle {
    width: 4px;
    height: 4px;
    background: blue;
    border-radius: 9999px;
    margin-top: 10px;
  }
  

• 方法3：显式指定容器的缩放原点
  给.container添加transform-origin: top left，明确缩放原点为左上角，避免默认中心缩放可能带来的渲染偏移问题：

  .container {
    width: 600px;
    height: 600px;
    transform: scale(0.3065);
    transform-origin: top left;
  }
  

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