Javascript Firefox中闪烁的SVG CSS转换

我有一个按钮有一个图标，它是内嵌的svg元素。当我点击图标时，css应用了三种转换

白色的svg圆转换为黑色的主圆以重叠它

容纳两个圆的g容器按比例放大

容纳两个圆的g容器旋转30度

在Firefox中，一旦圆圈在过渡结束时重叠，就会出现闪烁

调试很困难，因为当我打开firefox开发工具时，闪烁很少发生

const btnToggle=document.querySelector（“.btn toggle”）；
const moonShadow=document.querySelector（“.moon shadow”）；
const sunAndMoon=document.querySelector（“.sun and moon”）；
让toggle=true；
btnToggle.addEventListener（“单击”，（）=>{
如果（切换）{
moonShadow.style.transform=“translateX（0px）”；
sunAndMoon.style.transform=“缩放（1.5）旋转（30度）”；
}否则{
moonShadow.style.transform=“translateX（-15px）”；
sunAndMoon.style.transform=“缩放（1）旋转（0度）”；
}
切换=！切换；
});
main{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
}
.btn切换{
边界：0；
背景：继承；
光标：指针；
}
/*svg类*/
.太阳和月亮{
变换原点：中心；
转换：转换450ms；
}
.月影{
变换原点：中心；
-webkit转换：translateZ（0）；
转换：转换550ms；
}


点击图标

我对您的代码进行了一些调整，使其正常工作，还删除了JavaScript设置的内联CSS，因为如果不需要的话，我不会推荐它

真正“解决”问题的是：

backface-visibility: hidden;


代码示例

HTML

<main>
   <p>Click icon</p>
    <button class="btn-toggle">
      <svg xmlns="http://www.w3.org/2000/svg" width="84.0661" height="84.0661" viewBox="0 0 22.2425 22.2425">
        <g class="sun-and-moon">
          <circle class="sun" r="4.4093" cy="11.1212" cx="11.1212" fill="currentColor" />
          <circle class="moon-shadow" r="4.4093" cy="11.1212" cx="7.5566"
            fill="#fff" />
        </g>
      </svg>
    </button>
  </main>

Javascript

const btnToggle = document.querySelector(".btn-toggle");
const moonShadow = document.querySelector(".moon-shadow");
const sunAndMoon = document.querySelector(".sun-and-moon");
const activeClass = 'is-active';

btnToggle.addEventListener("click", (event) => {
  let isActive = event.currentTarget.classList.contains(activeClass);

  if (!isActive) {
    btnToggle.classList.add(activeClass);
  } else {
    btnToggle.classList.remove(activeClass);
  }
});

这在Firefox 76和77中非常明显。
const btnToggle = document.querySelector(".btn-toggle");
const moonShadow = document.querySelector(".moon-shadow");
const sunAndMoon = document.querySelector(".sun-and-moon");
const activeClass = 'is-active';

btnToggle.addEventListener("click", (event) => {
  let isActive = event.currentTarget.classList.contains(activeClass);

  if (!isActive) {
    btnToggle.classList.add(activeClass);
  } else {
    btnToggle.classList.remove(activeClass);
  }
});