How to make position sticky work in Safari

TLDR; This is how to make position sticky work in Safari:

Make the sticky element a block and make a parent relative.

<section style="display: relative">
  <div style="position: sticky; top: 150px; background: pink;">
    I'm sticky
  </div>
  <div style="padding-bottom: 100vh">
    some content...
  </div>
  <span style="position: sticky; top: 150px; display: block; background: darkcyan;">
      Me too!
  </span>
  <div style="padding-bottom: 100vh">
    some more content...
  </div>
</section>

Here’s how to make position sticky work on Safari and Safari mobile

Follow this simple checklist:

  1. Add position : sticky to the element that’s going to be sticky.
  2. Add top: 100px to the sticky element. This is the offset top of whatever you need it to be.
  3. Add display: block to the sticky element. flex and grid should work, too. *This is where Safari trips up, as inline or inline-* will not work.*
  4. Add position: relative to the parent (or ancestor) element that’s the sticky element is to stay within.
  5. Enjoy sticky elements.

That’s it, but if you need more help, please get in touch.

Reply