Firefox中绝对定位元素用transform: translateY(0)异常位移问题求助

问题现象 #

在Firefox浏览器中，为绝对定位元素设置transform: translateY(0)时，会出现元素轻微位移、底部边框消失的异常表现，而该问题在Chrome浏览器中不会出现。复现代码如下：

HTML代码

<div class="wrapper">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>

CSS代码

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
}

.wrapper {
  position: relative; 
  width: 200px;
  height: 400px;
  border: 1px solid red;
}

.box {
  position: absolute; 
  width: 100%;
  border: 5px solid white;
  /* 开启/关闭此行会触发边框消失/重现 */
  transform: translateY(0);
}

.box-1 {
  background-color: red;
  height: 25%;
}
.box-2 {
  background-color: blue;
  height: 75%;
  top: 25%;
}

原因分析 #

这属于Firefox与Chrome的渲染机制差异问题：当元素应用transform属性后，Firefox会将其放入独立的合成层进行渲染，在亚像素对齐处理时容易产生微小偏移，导致元素边框被父容器或相邻元素遮挡，视觉上表现为边框消失。Chrome的亚像素渲染算法对此类场景的处理更优化，因此不会出现该异常。

解决办法 #

• 移除不必要的transform声明：如果没有实际位移需求，直接删除transform: translateY(0)，元素会回到正常渲染流，边框显示恢复正常。
• 替换为transform: translateZ(0)：将transform: translateY(0)改为transform: translateZ(0)，同样能触发合成层，但Firefox对Z轴变换的像素对齐处理更稳定，不会产生偏移问题。
• 调整定位规则：为绝对定位元素明确设置top属性（如给.box-1添加top: 0），避免浏览器自动计算位置时的亚像素误差。
• 添加will-change提示：在.box类中加入will-change: transform，提前告知浏览器为元素分配合成层，减少渲染阶段的偏移误差。

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