iOS mobile safari - the bottom bar covers my footer

Question

iOS mobile safari has the address and bottom nav bar that come into view when you scroll upwards, and hide/minimize when you scroll down. I have a footer in my UI that gets hidden by the bottom nav bar, and I'm not sure what the best way to go about fixing this is. I could use javascript to detect the browser I'm using and then edit the css accordingly, but I wanted to know if there was a better, CSS only solution.

EDIT: I found a few examples of sites that do what I need, but I can't seem to duplicate their behavior.

• http://fetedelabiere.promo-agency.com/mobile/instant-verif-age
• http://www.mountaindew.com/
• http://fornacestudio.com/mobileapp/#projects

Addlepated

I had a little luck detecting the browser with code like this: if(/iP/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){ _this.setFooterForMobileSafari() } ...but for now my solution was to make do without a footer. – Addlepated

Answer 1

One solution could be to give a little more of padding-bottom to your main container in order to leave some space to the iPhone bottom bar.

Just use this code to target the mobiles with Safari:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding-bottom: 65px; //resize 
    }
}

And don't forget to add the .safari_only class to the element you want to target (should be your main container), example:

<div class='safari_only'> This div will have a padding-bottom:65px in a mobile with Safari  </div>

One detail: this is gonna affect also the Safari browser on Android devices, but fortunately not many users use Safari on an Android device, anyway if you need it you can use another css rule for overwriting that rule on Android.

Outoftheway

Hi, this answer looks interesting, but I have a question: what does the _:: means and is the mobile-full-page media covers the situation when the keyboard is open only? Because the problem exists only when you tap on input and the keyboard opens. – Cammiecammy

@Cammiecammy The "_::-webkit-full-page-media, _:future, :root" is called a css hack, and it is a trick to be sure the rule will be applied just in Safari browser. That rule will be applied on Safari browsers running on devices with a width under 767px, so mostly in mobile devices, without depending if the keyboard is open or not. – Outoftheway

@JuanmaMenendez Could you provide a reference? It's not clear which browser's are supported for these selectors. – Foskett

Answer 2

The solution is in this answer

Webkit (and others) has released new units for better control of viewport height behaviour. https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

svh, lvh and dvh are the new viewport units to be used

Foskett