When using 100vh on Mobile Safari, it fails to account for the height of the lower navigation bar.
For example, look at the screenshot below. To show my app-like footer, I have to manually subtract 74px from the container's height in a somewhat messy way (see code below). If I don't do this, my footer gets hidden under the mobile Safari navigation bar.
Is there a neat and common solution to handle this issue?
https://i.sstatic.net/VBzQk.png
To address this problem, I use the following code. However, I find it not very elegant. It relies on hard-coded offsets based on the user-agent platform/browser combination to work around native behavior. I'm not entirely comfortable relying on this solution:
edit by the way, this code runs in the ngAfterViewInit() method of my Angular4 "responsive, mobile first and progressive web app"
const wrapper:any = document.getElementsByClassName('hack-to-fix-ios-height')[0];
if(wrapper && this.iOS()){
let height = wrapper.offsetHeight;
height -= 74;
// Mobile Safari fix for footer nav
this.renderer.setStyle(wrapper, 'height', height + 'px');
}