求解决Safari中表格应用CSS transform后标题跳转的Bug

我之前也踩过Safari这个烦人的表格caption坑！当给<table>元素应用CSS transform属性时，表格的<caption>会被错误地渲染到表格末尾，而且常规的will-change: transform修复方法在这里完全不管用。

可行的修复方案 #

方案一：给Caption添加独立的Transform触发正确布局

给<caption>元素单独添加一个不影响布局的transform属性，强制Safari正确计算它的位置：

caption {
  /* 用translateZ(0)触发硬件加速，或者translate(0,0)也可以 */
  transform: translateZ(0);
}

这个方法通过让caption自身进入硬件加速渲染层，避免父表格的transform打乱它的布局顺序。

方案二：调整表格的Display属性

如果方案一无效，可以尝试修改表格的display类型，改变渲染上下文：

table {
  display: inline-table;
  width: 100%; /* 保持表格原有宽度 */
  transform: /* 你的原有transform属性，比如scale(1)或者translateX(0) */;
}

这个方法通过将表格从块级表格改为内联表格，规避Safari的布局bug。

补充说明 #

这两个都是针对Safari特定bug的临时修复——Safari在处理表格元素的transform时，对caption的布局逻辑存在异常。如果后续Safari更新修复了这个问题，就可以移除这些额外的CSS代码。

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