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

Posted

技术标签:

【中文标题】Safari 位置的解决方法:粘性 (-webkit-sticky) 错误【英文标题】:Workaround for a Safari position: sticky (-webkit-sticky) bug 【发布时间】:2020-01-15 23:45:03 【问题描述】:

如果您在 Safari(12.1.2 但适用于所有最新版本)中打开此 Fiddle https://jsfiddle.net/17uwnsq6/4/ 并开始向下滚动白色可滚动区域,则粘性“标题”元素将保持粘性,但稍后会滚动离开屏幕。在 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 布局调整容器大小时会出现此错误。有人知道这个问题的解决方法吗?目标是使标题始终具有粘性,同时调整容器的大小,使其占据“标题”剩余的视口部分。

【问题讨论】:

【参考方案1】:

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

【讨论】:

感谢您记录这一点。把我的头撞在墙上。 也为我工作!谢谢。多么奇怪的问题。 感谢您的回答。多么奇怪的错误。确保为此将 cmets 添加到您的 HTML 中,以便未来的开发人员不会删除看似不必要的空 div ... :| 这个 bug 吃了我一整天...好点 dv02 -- 我在评论中引用了这篇文章 :) 它有帮助!一整天都在我身边度过。我的情况有点不同——几个粘性容器一直在工作,但是当只有任何东西附加到 dom(工具提示、上下文菜单等)时突然停止工作。粘到左边的容器在鼠标移动之前停止粘滞。使用绝对位置将所有内容包装到一个容器中解决了这个问题。

以上是关于Safari 位置的解决方法:粘性 (-webkit-sticky) 错误的主要内容,如果未能解决你的问题,请参考以下文章

在父 div 上设置边框半径修剪图像角在 Safari 中不起作用

粘性页脚覆盖正文内容的底部

为啥不使用位置:固定为“粘性”页脚?

位置粘性在IE中不起作用[重复]

box盒模型

根据用户在 Angular 页面上的滚动位置使特定标题保持粘性