Firefox 89.0版本下多个position: sticky元素无故消失如何解决

问题根因 #

该问题是Firefox 89及相近版本的原生浏览器Bug，和CSS、JavaScript配置无关。根因是Firefox对table下sticky定位的行元素的重绘逻辑存在缺陷，快速移动鼠标触发元素重绘时，浏览器错误计算了sticky元素的可视区域，导致元素被标记为不可见从而停止渲染，该问题在后续Firefox 95及以上版本已经被官方修复。

兼容解决方案（均支持原生table布局、多列场景） #

方案1：低改造成本适配（无需修改HTML结构） #

给所有设置了position: sticky的tr元素添加GPU加速触发属性，强制浏览器用独立合成层渲染元素，避开重绘缺陷：

tr[style*="position: sticky"] {
  transform: translateZ(0);
  backface-visibility: hidden;
}

该属性不会改变元素原有布局和sticky定位逻辑，无额外副作用，适合原有代码已经大量给tr设置sticky属性的场景。

方案2：高兼容性适配 #

Firefox对table单元格的sticky支持稳定性高于行级元素，可将sticky属性从tr转移到该行内部所有th/td元素上，示例代码如下：

<table>
  <tr>
    <td style="position: sticky; top: 0px; height: 30px;">列1内容</td>
    <td style="position: sticky; top: 0px; height: 30px;">列2内容</td>
    <!-- 其余列同理 -->
  </tr>
  <tr>
    <td style="position: sticky; top: 30px; height: 30px;">列1内容</td>
    <td style="position: sticky; top: 30px; height: 30px;">列2内容</td>
    <!-- 其余列同理 -->
  </tr>
  <!-- 其余sticky行同理 -->
</table>

该方案兼容所有支持sticky属性的Firefox版本，适合新开发的表格场景。

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