我刚好对Firefox这个版本的渲染Bug有了解，来给你拆解下问题原因和解决办法：

问题核心原因 #

这是Firefox 57版本里一个和**合成层（compositor layer）**管理相关的渲染Bug，其他主流浏览器的合成层调度逻辑和Firefox不同，所以没有出现这个问题：

• 当父元素同时设置transform: translate(100px, 0)和overflow: hidden时，Firefox会将该父元素及其子元素归入一个特殊的合成层。但当translate的X轴偏移量超过子元素宽度时，Firefox的渲染引擎在处理子元素的transition动画时，错误地触发了大量不必要的重绘（repaint）操作，而非仅执行高效的合成层动画，这就导致了严重的卡顿。
• 移除overflow: hidden后，父元素的合成层触发条件消失，渲染逻辑回归正常，所以动画恢复流畅。

可行的解决方案 #

根据你的业务场景，你可以选择以下几种方案：

• 方案1：调整translate偏移量（如果业务允许）：确保父元素的translate X偏移量不超过子元素的宽度，避免触发Firefox的这个Bug逻辑。
• 方案2：强制子元素进入独立合成层：给子元素添加一个微小的transform属性，让它脱离父元素的合成层，避免冲突。比如给.block加上transform: translateZ(0)或者will-change: background-color，这样Firefox会单独处理子元素的动画，不会卡顿。
• 方案3：替换translate实现：如果不需要transform带来的硬件加速特性，可以用margin-left: 100px代替transform: translate(100px, 0)，这样也能避开这个Bug。

修改后的代码示例（方案2） #

<style>
div.wrapper { transform: translate(100px, 0px); overflow: hidden; }
div.block { 
  color: #fff; 
  background-color: #d9534f; 
  transition: background-color 0.3s ease-in-out; 
  width: 100px; 
  height: 100px;
  /* 添加该行强制子元素进入独立合成层 */
  transform: translateZ(0);
}
div.block:hover { background-color: #c9302c; }
</style>
<div class="wrapper"><div class="block"></div></div>

内容的提问来源于stack exchange，提问作者You Old Fool