IOS safari browser controlls overlaying webpage

By : andrea
Source: Stackoverflow.com
Question!

this might be sort of a random question. I'm developing a mobile web application and I want to give it as much of a native-app feel as possible. My problem is that i have elements on the website that is supposed to be centered both vertically and horizontally in the viewport but Safari's IOS browser snackbar (see picture) is ruining the look and feel.

enter image description here

(OBS this is obviously not my webpage)

The list that appears at the bottom of the browser, is placed on top of the website so that it overlays its content. This is problematic since the element doesn't appear to be centered anymore when this happens.

My question is. Is it in anyway possible to make the snackbar push up/ compress the content of the website instead of overlaying it? I have seriously no idea what to google.

Thank you

By : andrea


Answers

So it sounds like you want the minimal-ui property back, but unfortunately Apple has removed this. However all is not lost there are some hacks you can do.

Probably the most popular trick is to scroll down a pixel so safari hides the bars automatically.

Version 1:

window.scrollTo(0,1); 

Version 2:

/mobile/i.test(navigator.userAgent) 
&& !location.hash 
&& setTimeout(function() {
      window.scrollTo(0, 1);
    }, 300);?

The other option is to use a 3rd party plugin like Brim, which can essentially force the screen to rotate orientations and then rotate back extremely quickly.

By : Lofus


This video can help you solving your question :)
By: admin