如何在 Safari 中制作粘性表格行

Question

我正在尝试显示一个table显示一些分组数据的内容。

标题应该粘贴（在视口的顶部），还有一些包含组标题的表格行。

为简单起见，我在 Codepen 上创建了以下示例： https: //codepen.io/andreivictor/pen/RwZRZav

我尝试过的代码是：

td.sticky {
  background: red;
  color: white;
  position: sticky;
  top: 50px;  // this is the header height
}

它在 Chrome 和 Firefox 上运行良好。

问题是它在 Safari 中不起作用（在 Safari v14 上测试）；Safari 移动版也不行。请参阅屏幕截图： https://i.stack.imgur.com/08o4L.png - 该行是粘性的 - 但top位置不同（相对于表格顶部 - 而不是视口顶部）。

Answer 1

根据MDN

\n

\n
黏
\n
....\n这个值总是创建一个新的堆栈上下文。
\n

\n

我最好的猜测是 safari 考虑了前一个position: sticky元素的堆叠上下文（因此表头）并将.sticky前一个位置的 50px 顶部定位为粘性（而不是从容器的末尾）或类似的东西（我个人认为文档是对此有点模糊，所以似乎没有一种方法是必要的错误），但遗憾的是他们的行为不同。

\n

这篇文章似乎还表明，在 Safari 上堆叠粘性定位元素有点奇怪：

\n

\n
...特别是 Sifiari\xe2\x80\x99s 能够双重粘贴部分和元素。
\n

\n

（其中 Sifiari\xe2\x80\x99s 是 Safari 的）

\n

您可以查看最后一个链接中的讨论，但我不确定您是否会找到比使用不同顶部值更好的解决方案。你可以尝试使用像这样的选项

\n

\n
_::-webkit-full-page-media, _:future, :root .safari_only { ...
\n

\n

\n