Sticky footer + iOS Safari Issues

Design help General
1

Hi all! I am having issues with my site’s footer on mobile Safari. The footer is meant to be underneath everything else (its z-index is 0) and show only at the very bottom of the page. Instead it pops up too soon, and it is overtop of the body content.

Below are some short videos of my site that hopefully show what I mean. Please don’t mind the silly placeholder images, it’s still very much a work in progress.

Here is what it looks like on my iPhone in Safari:

Here is what it looks like on my friend’s Chrome:

The live site link is percyjrose.com and the preview link is Webflow - Percy's Portfolio

Do sticky positions not work on Safari? Should I just give up on my dreams of a sticky footer and make it a regular one?

Thanks in advance for any assistance! :smiling_face:

2

I fixed it!! I tried out a solution posted here where I set the elements that were meant to appear above the sticky footer to sticky as well, but left the settings as auto.

At first it only fixed one of the three sections, then I realized the other two sections had erroneous classes leftover on them from the template that I had very heavily modified… whoops. It worked after I removed those. I feel a little dumb, haha, but I’m glad I figured it out eventually!

1 Like
3

Thank you! Have been looking for this solution :star_struck: