Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

position: sticky on Safari starts failing when scrolling down

I'm using position: sticky to create sticky headers, which works fine for Chrome, Firefox, etc. On Safari, when I start scrolling it works just fine, but after scrolling down further the headers start to dissapear. It seems it has something to do with the height of the content / the height of the headers. When there is less content it works fine for Safari as well.

Can someone explain to me what is happening in Safari and how this can be fixed?

.wrapper {
  max-height: 500px;
  background-color: rgb(230, 230, 230);
  padding: 10px;
  display: flex;
}

.container {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.sticky-header {
  background-color: rgb(130, 130, 0);
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  border: 2px solid rgb(0, 0, 0);
}

.sub-header {
  top: 50px;
}

.content {
  background-color: rgb(0, 255, 0);
}
<div class="wrapper">
  <div class="container">
    <div class="sticky-header">
      HEADER
    </div>
    <div class="sticky-header sub-header">
      SUBHEADER
    </div>
    <div class="body">
      <div class="content">

        <div>This is the first line</div>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam
          viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor.
          Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus
          maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum,
          turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus
          eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec,
          euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget
          placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur,
          tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin
          pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem
          ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit.
          Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut,
          varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada
          neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio
          condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat
          eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus,
          molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor
          sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan,
          sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra,
          dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci.
          Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo
          dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt.
          Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar
          sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel
          lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis
          placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor,
          malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi,
          tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis
          sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu,
          suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus
          elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices
          turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel,
          aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra
          ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla
          elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor.
          Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque
          quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies
          luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit
          quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus
          finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet
          massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean
          vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non
          ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus
          augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat
          nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor,
          velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin
          ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu
          mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis
          ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue.
          In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus
          urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam
          venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora
          torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien,
          in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt
          eu. Proin vulputate dui ut justo elementum, in semper diam aliquam.
        </div>
      </div>
    </div>
  </div>
</div>

See also: https://codepen.io/geertp/pen/yLYYZqM

like image 442
Geert Avatar asked Apr 14 '20 20:04

Geert


People also ask

Does position sticky work on Safari?

Here's how to make position sticky work on Safari and Safari mobile. Follow this simple checklist: Add position : sticky to the element that's going to be sticky. Add top: 100px to the sticky element.

Why isnt my position sticky working?

That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. Position sticky may not work correctly if any parent element has a set height. Many browsers still do not support sticky positioning.

What is sticky on scroll?

Sticky content is one that will stay positioned once the user scrolls past it (i.e: stuck in position). Unlike position: fixed; , sticky content is limited by its container and will stop scrolling once the end of the parent element is reached.

What does Webkit sticky mean?

position: sticky is a new way to position elements and is conceptually similar to position: fixed . The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.


1 Answers

Position sticky is slightly convoluted in how it works. It maintains the "stickiness" until it reaches the end of its parent's scroll. This means the sticky's stickiness is determined by the parent element's(.container) scroll position, in-other words height.

Here is a fixed & working example of your code. https://codepen.io/krishnasagr/pen/XWmeeqp

The fix is to simply move the sticky element into the .container element so that the position sticky stays sticky until the end of the content's scroll.

Do this: Move the sticky element into the container like this.

.wrapper {
            max-height: 500px;
            background-color: rgb(230, 230, 230);
            padding: 10px;
            display: flex;
        }
        
        .container {
            flex: 1;
            min-height: 0;
            overflow: auto;
            position: relative;
        }
        
        .sticky-header {
            background-color: rgb(130, 130, 0);
            position: sticky;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            border: 2px solid rgb(0, 0, 0);
        }
        
        .sub-header {
            top: 50px;
        }
        
        .content {
            background-color: rgb(0, 255, 0);
        }
<div class="content">
   <div class="sticky-header">
      HEADER
    </div>
    <div class="sticky-header sub-header">
      SUBHEADER
    </div>
    <div>This is the first line</div>
   <div>Lorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
</div>
like image 161
Krishna Sagar Avatar answered Nov 15 '22 12:11

Krishna Sagar