跳转 Safari 表格标题的解决方案？答案

【问题标题】：Solution for jumping Safari table caption?跳转 Safari 表格标题的解决方案？
【发布时间】：2018-09-26 02:38:13
【问题描述】：

任何人都有解决似乎是 Safari 错误的方法吗？当转换 CSS 应用于表格内容时，标题会跳转到表格末尾。

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

见codepen：

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 中修复

【问题讨论】：

您好，关于这个问题有什么更新吗？到目前为止，我遇到的唯一解决方法是按照链接中的建议在标题内设置绝对位置
@HargunSingh 不，它仍在 Safari 中跳跃。其他浏览器工作正常，这是 Safari 的错误，仍然被列为 Apple 错误系统中的开放错误。标题的绝对定位不是一个选项，因为它会弄乱布局。
能否请您分享一个错误发布位置的链接以供参考
绝对不要定位标题试试这个你的内容
@HargunSingh Apple bugtracking（现在的反馈助手）不向公众开放。您只能看到自己提交的内容。使用 JS 设置标题高度与跨度高度相同（否则标题高度为 0）时，跨度的绝对定位起作用。这是可行的。谢谢。

标签： css animation safari

【解决方案1】：

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

尝试添加以下 CSS：

caption {
    display: block;
}

【讨论】：

不幸的是，这会改变渲染并将标题放在标题下。你可以在 CodePen 中看到效果。

【解决方案2】：

我不敢相信这个问题现在还没有解决。

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

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

【讨论】：

是的，这会将标题放在它的位置，但是当转换开始时它仍然首先跳到错误的位置。仍在等待Apple解决此问题。距离错误报告仅几年时间。