跳跃Safari表标题的解决方案？

Question

谁有一个似乎是Safari bug的解决方案？将转换CSS应用于表格内容时，标题会跳到表格的末尾。

有一个提示使用"will-change: transform“作为similar case的标题，但不幸的是它在这里不起作用。

请参阅codepen：

https://codepen.io/anon/pen/GxVWzV

HTML：

<table>
<caption>
  Caption
</caption>
  <thead>
    <tr>
      <th></th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="collapse(this)">
      <td></td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

CSS

tbody tr > td:first-child:before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid black;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
  pointer-events:auto;
}
tbody tr.collapsed > td:first-child:before {
  content: ' ';
  transform: rotate(90deg) translateX(-3px);
}

JS：

function collapse(e) {
  e.classList.toggle("collapsed");
}

注:已在Safari 15.1中修复

Answer 1

我在iOS Safari中遇到了类似的caption-side: top;问题。

尝试添加以下CSS：

caption {
    display: block;
}

Answer 2

我真不敢相信这事到现在还没解决。

在jQuery中，我所做的是分离标题，然后重新附加：

$('table').prepend($('caption').detach());