嵌套的“position：sticky”元素不会粘贴在Safari中，但可以在iframe中使用

Question

我正在使用CSS position: sticky将一些元素粘贴到我的页面上。我正在使用<div>s来生成网格状结构（<table>s不适合我的用例）。请注意，这特别是一个position: sticky问题 - 我不是在寻找Javascript解决方案，我相信position: sticky应该根据规范和其他浏览器中的行为按预期工作。

我需要为垂直滚动添加一行，并且该行中的第一个单元格用于水平滚动。如果我在第一个细胞上使用position: sticky; left: 0;而没有粘住该行，那么细胞就会向左侧移动。但是，如果我使用例如Safari。

.row {
    position: sticky;
    top: 10px;
    width: ...
}
.cell {
    position: sticky;
    left: 0;
    width: ...
}

当根据需要垂直滚动时，该行会粘住但在水平滚动时单元格不会粘住。

该代码在Chrome和Firefox中以及在Safari中的iframe中表现得如此。

这是一些最小例子的代码：

CSS：

.row {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    white-space: nowrap;
    width: 2000px;
    z-index: 30;
}
.cell {
    display: inline-block;
    width: 100px;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    font-weight: bold;
}

HTML：

<div class="row">
    <div class="cell sticky">Sticky</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    ...
</div>

这里上传的文件（在加载到iframe时不能使用codepen / jsfiddle）：

https://qcn.github.io/minimal_sticky.html最小示例：在Safari中不起作用，适用于Chrome / Firefox

https://qcn.github.io/minimal_sticky_iframe.html加载到iframe中的相同的最小示例：在Safari中可以工作！

我注意到的另一个有趣的事情是，如果我水平滚动页面然后刷新，粘性单元格会在视口左侧渲染，然后在该位置正常滚动（即它仍然不会粘住，但它知道它在哪里应该在页面加载！）。这个以及行为在iframe和其他浏览器中工作的事实让我怀疑这是一个浏览器错误，但我无法找到其他引用。

Answer 1

这似乎是这个错误的一个例子：https://bugs.webkit.org/show_bug.cgi?id=106062

我通过将页面包装在滚动div中来处理我的问题，而不是使用视口滚动。不理想，但它似乎是一个浏览器错误。