Sticky section issue ipad and iphone, help required

Design help General
1

Hi, I have a sticky section “section-hero-work” on my “Works” template page.

The section is supposed to be behind all other sections on the page. This works fine on desktop. However, it does not work on the ipad and iphone it stays in front of the other sections. I have a similar effect on the home page which works fine on ipad and iphone.

I have put all sections z-index above the section-hero-work however it still doesnt solve the issue.

Thanks, Scott

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

2

https://swnew.webflow.io/work/question-session

3

I couldn’t reproduce your issue - tried on all devices you’ve mentioned and also visited at the published link - please attach video that describe the issue. :slight_smile:

4

Hi Shokoaviv,

It works fine in the webflow designer.

It doesn’t work for me online in the published link. Links to videos

Ipad

https://vimeo.com/406182631/09c6a14b93

Mobile

https://vimeo.com/406183152/36b2f57259

Many thanks

5

Hi

I don’t know - on My iPad device it is working perfect, See the attach video:

6

Hi

Thanks for that however you are on the wrong page. It works fine on the home page as per your video.

It is the work page and work template page where the issue is for me.

Thanks,

Scott

7

Hi.
No worry. we’ll find it!

Check the z index of this class: div-hero-heading-wrapper. Should it need to be z index auto?

8

Yeah it is already set to auto, tried changing it to 0 also -10 however didn’t do anything

9

Sorted now thanks, hero section added -10 z-index.