iOS Safari bottom padding issue? (Footer overlapping content)

HTML & CSS
1

Hi guys,

I’m tearing my hair out with a weird CSS issue on a project I’m working on.

The site is [link removed] - it works perfectly on Chrome desktop and Android, but when I load it on my iPhone (Safari), the bottom footer seems to float up and cover the last 50px of the content.

I’ve tried adding padding-bottom: 100px to the body and messing with the viewport height (100dvh vs 100vh), but it’s acting super inconsistent.

Could someone quickly check if it’s doing the same for them? I’m not sure if it’s my specific CSS grid setup or just a Safari quirk.

Thanks in advance!

2

You must have posted the wrong link as there is no floating footer in that example and therefore I have removed the original link.

1 Like
3

This is a known Safari (iOS) issue, not just your setup. It usually happens when a fixed or sticky footer interacts with vh units and the iOS dynamic toolbar.

On iPhone Safari:

  • 100vh / 100dvh can miscalculate height

  • The bottom safe area isn’t accounted for, so the footer overlaps content

Quick fixes to try:

  • Add safe-area padding:

    padding-bottom: env(safe-area-inset-bottom);

  • Avoid height: 100vh on main wrappers; use min-height

  • If the footer is position: fixed, switch to sticky or add extra bottom spacing to the content container instead of body

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.