Hi,
I’m having some issues with sticky containers, particularly in Safari (Chrome seems to behaving normally). My landing page is working fine, but my case studies are not functioning properly (almost entirely the problem appears in Safari). What I am trying to achieve is the following:
Section 1 - Hero image (Z-depth 0)
Section 2 - Project Description (Z-depth 1)
Section 3 (Remaining Content) - Design Sections (Z-depth 2)
I would like Section 1 (image) to stick to the top of the page and remain there, then Section 2 slide over top, hit the top of the browser and pin. Then Sections 3+ (the remainder of the page contents) to slide over Section 2 and behave like a static page from that point on.
If I view the site in Chrome, I get the expected behavior. If I view in Safari, it’s a mess. Maybe this is a known issue with Safari?
One other thing I am noticing is that on mobile (Chrome and Safari), Section 2 is not scrolling through all the written content. This may be related to how I have everything set up, and might offer a clue into what I am doing wrong.
Thank you in advance!
Example Page
Read-Only: Webflow - Mike Heighway — Creative Director
Live Site: SketchUp