Streaming live at 10am (PST)

Problems with Position: sticky in Safari

Hey guys, I wanted to ask your help with a problem I’m having with Safari. I will try to explain here in the sequence of GIFS.

I’m creating a onepage site where some sections have * position sticky * and others have * position relative * with only heading with sticky position. in Chrome it works beautiful, but on safari no matter how much I put the larger z-index in the section with position relative it ends up passing under.

Has anyone been through something similar?

Check out the gifs…



Here is my site Read-Only:

can you please reset your share link?

What happens when you change Firefox user agent to Sifari user agent?
Does IX2 opacity rules work on chrome / sifari?



I am un able to reprocude error on win 10 chrome firefox.

This seems to be a browser compatibility issue. Particularly Sifiari’s ability to double sticky a section and element.

A potential work around is settng a hard BG on your sticky element.

This is a known issue on stack overflow and you may be able to resolve it with a few tweaks to custom CSS code.


I think I found your solution:

Step 1:
Disable Z Index on the Header Sections or Iner Divs

Step 2:
Change inner sticky from ‘Sticky’ to ‘Fixed’ position

Step 3:
Apply Section IX2 to toggle child class into sticky (fixed) position.

Watch this video to see how I did it, this should (hopefully) work in Sifari:

(edit: I meant to say Classes siblings for same sectionclass names, ALL classes for global)


Thanks a lot for the help. You were amazing!