嵌套的“位置：粘性”元素不粘在 Safari 中，但在 iframe 中有效答案

【问题标题】：Nested "position: sticky" element not sticking in Safari, but works in iframe嵌套的“位置：粘性”元素不粘在 Safari 中，但在 iframe 中有效
【发布时间】：2019-03-27 00:45:36
【问题描述】：

我正在使用 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: ...
}

row 在按需要垂直滚动时会粘住，但 cell 在水平滚动时不会粘住。

代码在 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 和其他浏览器中起作用的事实让我怀疑这是一个浏览器错误，但我无法找到其他对它的引用。

【问题讨论】：

这里已经回答了：stackoverflow.com/a/16087477/2843112
@MatthewT 这个问题并没有解决我的问题 - 这是一个类似的用例，但来自 position: sticky 次之前，并且没有解决此处浏览器之间出现的冲突行为。

标签： css safari position css-position sticky

【解决方案1】：

尝试添加一个单位。当我想将嵌套标题粘贴到顶部时，它起作用了。我没有试过你的水平情况。希望对您有所帮助。

left: 0px; 而不是left: 0;

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我终于找到了解决办法！！！

使用display: contents;

https://css-tricks.com/get-ready-for-display-contents/

【讨论】：