Web App is Overlayed with Safari Navigation Bar in Portrait Mode

My web app polls the webpage.width and webpage.height to auto size its contents. This seems to work great except when the app is displayed in portrait mode on IOS 10 Safari mobile browser. The top navigation bar is hidden by default, but is shown when the user clicks the top portion of the screen. The navigation bar hides some of the webapp content. The webpage.width/webpage.height are not updated as you would expect so the webapp doesn’t reposition the content.

Apple doesn’t seem to care much for web-apps, I suppose they clash with their app approval process… It seems we are forced to jump through whatever hoops they feel like throwing at us. There was a time when you could force the minimal ui, but that was depreciated in IOS 8 I believe.

One developer’s workaround was to ask the user to scroll down when the navigation bar is detected, but this isn’t an option for me as I have disabled scrolling and do not want to bother the end user.

Any help resolving this tricky issue would be greatly appreciated.