Firefox中过渡动画期间忽略border-radius的问题及Mozilla专属修复属性咨询

我之前在旧版Firefox上也碰到过一模一样的问题，尤其是Linux环境下的78.12 ESR版本，过渡动画期间圆角突然变成方形，确实挺闹心的。针对这个问题，有几个Mozilla专属的小技巧和通用修复方法，你可以试试：

1. 用Mozilla属性触发硬件加速 #

Firefox在处理某些过渡动画时，软件渲染模式下可能会忽略border-radius的渲染。你可以添加-moz-transform: translateZ(0)来强制触发GPU硬件加速，让浏览器在动画期间也能正确渲染圆角：

#sidebar-toggle{
  border-radius:30px;
  border-width:0;
  width:30px;
  height: 45px;
  background:#555;
  color:#999;
  transition: all 0.2s ease-in-out;
  position:relative;
  float:right;
  left: 15px;
  top:calc(50% - 35px - 90px);
  z-index:10;
  cursor:pointer;
  box-shadow:0px 0px 10px rgba(0,0,0,1);
  /* 添加这行，触发Firefox硬件加速 */
  -moz-transform: translateZ(0);
}

2. 加上overflow: hidden兜底 #

如果硬件加速的方法没生效，给按钮添加overflow: hidden也能强制背景色的变化被限制在圆角范围内，避免方形突兀出现：

#sidebar-toggle{
  /* 保留原有属性 */
  overflow: hidden;
}

3. 缩小过渡范围，避免all过渡 #

你当前用的是transition: all 0.2s ease-in-out，这种全属性过渡会让浏览器处理很多不必要的属性变化，容易触发渲染bug。不如把过渡明确指定为background-color，减少渲染压力：

#sidebar-toggle{
  transition: background-color 0.2s ease-in-out;
}

背后的原因 #

Firefox 78.x ESR是比较老的长期支持版本，在Linux的软件渲染环境下，处理CSS过渡和圆角的叠加逻辑存在一些已知缺陷。通过触发硬件加速或者限制过渡属性，就能绕过这些渲染bug。

优先试试第一种方法，这是针对Mozilla浏览器的专属优化，大概率能解决你的问题。

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