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?
Tanks!!!

Check out the gifs…

Chrome
Chrome

Safari
Safari


https://testesticky.webflow.io

Here is my site Read-Only: https://preview.webflow.com/preview/testesticky?utm_medium=preview_link&utm_source=dashboard&utm_content=testesticky&preview=5111e5fcbad30a4d26738ecd0cdf5368&mode=preview

@Francisco_J_dos_Sant
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?

Ok
https://preview.webflow.com/preview/testesticky?utm_medium=preview_link&utm_source=designer&utm_content=testesticky&preview=27bd164bfc3211c32ecf48136aad6b7e&mode=preview

@Francisco_J_dos_Sant

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.

@Francisco_J_dos_Sant

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
image

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)

2 Likes

Thanks a lot for the help. You were amazing!