Debugging Position Sticky in Safari Mobile

Design help Layout & Design
1

I have a relatively straightforward site, and I’m struggling with what appears to be z-depth issues in Safari on mobile. I’m wondering if anyone can help me figure out what is wrong here. On desktop, the “Case Studies” section, pictured below is in the left column and pins to the top on scroll. No problem there. When it stacks above, the link blocks (image, title, description) appear to slide under the text until hover, and then Safari stacks everything correctly. I’m not sure what is going wrong, but I’m certain that I’ve missed something, and this isn’t a case of Safari being picky. Chrome and Firefox behave correctly.

Thank you!

Mobile-PreHover
Mobile-PreHover1466×1986 145 KB

Desktop
Desktop1920×1242 97.9 KB

Mobile-Hover
Mobile-Hover1468×1956 126 KB

Here is my site Read-Only: [LINK][1]
([https://preview.webflow.com/preview/mikeheighway?utm_medium=preview_link&utm_source=designer&utm_content=mikeheighway&preview=c9ad9a00141d7b26052da1654b6e982d&pageId=635c5cbb1407d83d3cb1fcbe&workflow=preview][2])

2

Try setting a z-index on your grid that wraps your tiles as well as your tiles

So set them all to relative + a higher z-index than your sticky section

1 Like
3

Okay, I figured it out with your recommendation, @franzruggiero. It turns out that both columns need to be set to Sticky within the parent. I had one that was Sticky, the other was Relative. So, Sticky column was in relation to its parent, and Relative was in relation to the top level container.