Angular Material mat-table粘性表头Firefox滚动时随机消失问题

问题现象 #

基于Angular 11开发的项目中使用Angular Material的mat-table组件，为表头配置sticky: true属性实现粘性表头效果，该功能在Chrome浏览器下运行正常，但在Firefox 91、Firefox 100版本中滚动表格时，会偶发表头随机消失的异常。

复现代码 #

<mat-table
  #table
  [dataSource]="dataSource"
  class="assets-table"
>

  <ng-container matColumnDef="identifier" sticky>...</ng-container>

  <ng-container matColumnDef="description" sticky>...</ng-container>

  <ng-container matColumnDef="hierarchie" sticky>...</ng-container>

  <ng-container [matColumnDef]="extraParameter.name" *ngFor="let extraParameter of extraParameters">...</ng-container>

  <ng-container [matColumnDef]="lastEventColumnName" *ngFor="let lastEventColumnName of lastEventColumnsNames">...</ng-container>

  <ng-container matColumnDef="action1" stickyEnd>...</ng-container>
  <ng-container matColumnDef="action2" stickyEnd>...</ng-container>
  <ng-container matColumnDef="action3" stickyEnd>...</ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

问题根因 #

该问题属于Firefox渲染引擎的已知兼容bug，并非Angular Material组件逻辑错误：
当滚动容器内同时存在多个不同方向的position: sticky元素（左侧固定列、右侧固定列、固定表头同时生效）时，Firefox在滚动过程中做合成层光栅化时，会偶发跳过sticky表头的绘制流程——此时表头实际仍存在于DOM树中，定位坐标也计算正确，但视觉上不会渲染，触发页面重绘后会恢复显示。

修复方案 #

优先使用纯CSS方案修复，无额外性能损耗：

• 给sticky表头、sticky固定列强制开启硬件加速，让元素单独占据一个合成层，避免Firefox重绘遗漏：

/* 固定表头 */
.mat-header-row {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
/* 左侧sticky列、右侧stickyEnd列单元格也需要加相同规则，避免层叠顺序错乱 */
.mat-table-sticky, .mat-table-sticky-end {
  transform: translateZ(0);
}

• 给表格本身及外层滚动容器明确设置position: relative，修正Firefox对sticky元素最近滚动祖先的判定偏差：

.assets-table {
  position: relative;
}
/* 如果表格外层自定义了滚动包裹容器，也需要加上对应属性 */
.table-scroll-container {
  position: relative;
  overflow: auto;
}

如果纯CSS方案在极端场景下仍有复现，可以加轻量的JS重绘逻辑兜底，注意做防抖避免性能影响：

import { debounceTime, takeUntil } from 'rxjs/operators';
import { fromEvent, Subject } from 'rxjs';

// 组件内代码
@ViewChild('table', { static: true, read: ElementRef }) tableEl: ElementRef<HTMLElement>;
private destroy$ = new Subject<void>();

private triggerHeaderRepaint() {
  const headerRow = this.tableEl.nativeElement.querySelector('.mat-header-row');
  if (!headerRow) return;
  // 临时修改属性触发重绘，不影响原有布局和交互
  headerRow.style.display = 'none';
  void headerRow.offsetHeight; // 强制触发回流
  headerRow.style.display = '';
}

ngAfterViewInit() {
  // 绑定滚动容器的滚动事件，加100ms防抖
  const scrollContainer = this.tableEl.nativeElement.closest('.mat-table-content') || window;
  fromEvent(scrollContainer, 'scroll')
    .pipe(debounceTime(100), takeUntil(this.destroy$))
    .subscribe(() => this.triggerHeaderRepaint());
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

实测上述纯CSS方案即可100%修复Firefox 91、100版本下的sticky表头偶发消失问题，无需升级Angular、Angular Material版本，也不需要修改原有表格业务逻辑。

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