iPhone browser address bar driving me crazy!

[ozRocker]

I've been ripping my hair out dealing with the Safari browser address bar on iPhones.  By default if you turn the phone to landscape you have an address bar that sometimes drops down and covers the content.  With normal HTML you can drag page elements upwards which will push the address bar away and take you back to fullscreen mode.  When you have a 3D canvas you can't do that.  Its not an element you can drag around with your finger.  I've researched and there's no way to determine if the address bar is showing or not.  There's also no way to hide/show it via code (not since iOS 7).  What I've done is changed "position" of the canvas to "fixed" and the canvas will actual get pushed down by the address bar.  So with that I can tell if the address bar is showing by this code:

 

var canvas = document.getElementsByTagName("canvas")[0];onResize(canvas);function onResize(element) {    var elementHeight = element.height,        elementWidth = element.width;    setInterval(function(){       if (element.height !== elementHeight || element.width !== elementWidth) {          oldHeight = elementHeight;          elementWidth = element.width;          elementHeight = element.height;          setTimeout(function() {            engine.resize();          }, 1000);       }    }, 300);}

This is not a great solution.  It just polls the canvas to see if its changed dimension since 300 milliseconds ago.  I searched for ages and this was the only solution that worked.  Also, in order to hide the address bar you need to place an HTML element on top of the canvas and the user needs to push that upwards to hide the bar.  Its not ideal at all.  Basically once the address bar is down its hard and non-intuitive to hide it again.  Its a bigger problem on the iPhone 5S because the addition of the address bar and footer bar reduces the canvas height substantially in landscape mode.  Has anyone dealt with this before?  Any suggestions on how to deal with this?

[george]

I do the same. And many others too. Fix the canvas to the size of the viewport and add some padding to the bottom of the page so that the user is allowed to scroll down. Experienced user will know what to do and you could tell unexperienced users how to hide the address bar and activate the minimal ui. There is no way around this problem without asking the user to add the app to the home screen. I really would save the energy for your real stuff. Settle with it and hope that apple delivers some solution soon that will last longer than a minor iOS version like it happened with the minimal-ui meta tag.

 

Regards George

[ozRocker]

Thanks for the advice George.  I've added a bit of padding to the bottom of the page (I've noticed others suggest that too) and I've left it as is.  Its not perfect but at least none of the canvas is getting cut off