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

Check out the gifs…

Chrome
Chrome

Safari
Safari


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

@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!