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

Question

如果您在 Safari（12.1.2 但应适用于所有最新版本）中打开此 Fiddle https://jsfiddle.net/17uwnsq6/4/ 并开始向下滚动白色可滚动区域，首先粘性 "Header" 元素将保持粘性，但稍后会滚出屏幕。在 Chrome 和 Firefox 中，它总是像预期的那样保持粘性。

HTML和CSS供参考：

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

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  flex: 1 1 0;
  overflow: auto;
}

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.content {
  height: 2500px;
}

.title {
  flex: 0 0 auto;
  background-color: lightblue;
}

似乎在使用 flex 布局调整容器大小时会出现此错误。有人知道这个问题的解决方法吗？目标是使 header 始终保持粘性，同时调整容器的大小，使其占据 "Title".

剩余的视口部分

Answer 1

我想我已经明白了。诀窍是将可滚动容器的整个 children（即 header 和内容）放入包装器 div - 这样就不会触发错误。

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

Workaround for a Safari position: sticky (-webkit-sticky) bug

css

safari

css-position

sticky

flexbox