iOS Safari下ngClass切换hidden类后DOM更新正常但元素未渲染问题

问题根因 #

该问题属于iOS Safari的已知兼容性缺陷：当Angular通过ngClass动态切换包含display/visibility/opacity等视觉属性的类名时，虽然DOM属性已更新，但Safari未主动触发渲染树重计算，导致UI没有同步更新。

可行解决方案（按优先级从高到低排序） #

方案1：改用*ngIf控制显隐（最稳妥，零兼容性问题）

直接替换ngClass动态加hidden类的写法，由Angular直接操作DOM节点的添加/移除，完全避开类名切换的渲染bug，适合组件初始化开销不大的场景：

<!-- 替换前 -->
<div [ngClass]="{'hidden': type === DocumentType.REGULATORY_DOCUMENTS}" class="filter-section">

<!-- 替换后 -->
<div *ngIf="type !== DocumentType.REGULATORY_DOCUMENTS" class="filter-section">

<!-- 日期选择容器同理替换 -->
<div *ngIf="period === DocumentPeriod.SPECIFIC_DATES && type !== DocumentType.REGULATORY_DOCUMENTS">

如果需要保留组件内部状态不想每次销毁重建，可使用下面两个方案。

方案2：添加CSS属性强制触发GPU渲染

给需要动态切换显隐的元素添加触发GPU加速的基础属性，强制Safari对该节点单独做渲染层管理，避免重绘遗漏：

/* 给所有用ngClass切换显隐的元素添加该样式 */
.filter-section, .date-range-container {
  transform: translateZ(0);
}

/* 确保hidden类优先级足够 */
.hidden {
  display: none !important;
}

方案3：状态变更后手动触发重绘

在type、period的状态变更逻辑末尾，添加一行强制浏览器重排的代码，开销极低即可触发UI同步：

// type/period赋值操作后添加
void document.body.offsetHeight; // 读取offsetHeight会强制浏览器刷新渲染队列

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