Search code examples
csssafariflexboxcss-positionsticky

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

If you open this Fiddle https://jsfiddle.net/17uwnsq6/4/ in Safari (12.1.2 but should work for all recent versions) and start scrolling down the white scrollable area, at first the sticky "Header" element will remain sticky, but will later scroll off the screen. In Chrome and Firefox it always remains sticky as expected.

HTML and CSS for reference:

<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;
}

It seems that this bug shows up when the container is sized using flex layout. Does anybody know of a workaround for this issue? The goal is to make the header always sticky, while at the same time to size the container so that it would occupy the part of the viewport left over by the "Title".

Solution

  • I think I've figured it out. The trick is to put the entire children of the scrollable container (that is, the header and the content) into a wrapper div - then the bug isn't triggered.