Safari 位置的解决方法：sticky (-webkit-sticky) 错误

Question

如果你在 Safari 中打开这个 Fiddle https://jsfiddle.net/17uwnsq6/4/（12.1.2但应该适用于所有最新版本）并开始向下滚动白色可滚动区域，首先粘性“标题”元素将保留粘性，但稍后会滚出屏幕。在 Chrome 和 Firefox 中，它总是按预期保持粘性。

HTML 和 CSS 供参考：

<div class="title">Title</div>
<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
</div>

<div class="title">Title</div>
<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
</div>

当使用 flex 布局调整容器大小时，似乎会出现此错误。有人知道这个问题的解决方法吗？目标是使标题始终具有粘性，同时调整容器的大小，使其占据“标题”留下的视口部分。

Answer 1

我想我已经想通了。诀窍是将可滚动容器的整个子项（即标题和内容）放入包装器 div 中 - 然后不会触发错误。