Firefox浏览器表格sticky粘性表头滚动时闪烁无法渲染如何解决？

这是Firefox浏览器针对表格内部sticky元素的已知渲染缺陷，核心原因有两个：

• Firefox对表格布局元素的重绘逻辑存在同步问题：当鼠标悬停在表格内容行上滚动时，浏览器会触发内容行的hover状态重绘，此时sticky表头的重绘优先级被压低，合成线程与主线程的渲染同步出现偏差，导致表头偶尔没有被正确绘制到视口顶层
• 当前的DOM结构中，sticky定位直接加在了内部的元素上：Firefox对嵌入在内的行级sticky元素支持度较差，滚动时的偏移量计算和重绘区域判定容易出错，进而出现闪烁、不渲染的问题

之前尝试的方案无效的原因：

• min-height: 0 是用来解决flex布局的子元素溢出收缩问题，和本次渲染bug无关
• 给表头单独加-webkit-transform: translateZ(0)无效，一方面是-webkit前缀的属性在Firefox中不生效，另一方面表格行元素的渲染上下文和整个表格绑定，单独给行加3D变换无法触发独立合成层的提升

• 方案1（最推荐）：调整DOM结构，将表头行从中移出，放入独立的标签中，把sticky定位加在元素上，同时给表格添加border-collapse: separate样式，Firefox对级别的sticky支持度远高于tbody内部的行元素，修复率最高
  调整后的CSS示例：

  table {
    border: 1px solid #ccc;
    border-collapse: separate;
  }
  thead {
    position: sticky;
    top: 0;
    background: #ddd;
  }
  

• 方案2（无需改DOM）：给sticky的表头元素添加will-change: position属性，强制浏览器提前为该元素分配独立的合成层，避免和表格内容行的重绘互相干扰
  调整后的CSS示例：

  .table-header {
    position: sticky;
    top: 0;
    background: #ddd;
    will-change: position;
  }
  

• 方案3（无需改DOM）：给整个表格元素添加transform: translateZ(0)属性，强制整个表格的渲染走独立合成层，避免滚动时内容行和表头的重绘冲突，注意该属性要加在标签上而非表头行
  

  table {
    border: 1px solid #ccc;
    transform: translateZ(0);
  }
  

• 方案4（兼容备选）：如果以上方案都不生效，可以给表头添加backface-visibility: hidden属性，同样可以触发独立合成层的创建，修复Firefox下的渲染闪烁问题

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

调整后的CSS示例：