Layered scroll buggy on Safari

Design help General
1

Hi there,

On the homepage, as well as on the other project pages, I am using an effect I am calling layered scroll. One object is sticky and another moves above it.

The hero section is sticky and relative so that the content sections roll over it as you are scrolling. Once the content is done it reveals the footer underneath the content sections which is also sticky and relative

My issues:
– The hero section works well on Chrome but not on Safari. Scrolling on Safari the hero section doesn’t respect the index numbers and still “glitches” through the content sections.

– The footer shows when scrolling down but once down and I scroll a little up and down again it doesn’t show.

Read only link
https://preview.webflow.com/preview/peckish-minds?utm_medium=preview_link&utm_source=designer&utm_content=peckish-minds&preview=4d7e64771afb28b51c8aeb6864823bfc&workflow=preview

Any ideas?

2

Fixed it.
I had to add more layers and did this by removing sections and replacing them with divs and then wrapping them in sections.