Detect when the Chrome for iOS address bar is showing

Question

I have set the apple-mobile-web-app-capable to true in my web app's head section. All good, Chrome tries to hide the address bar when possible to give more room to the web app.

Problem is that my app's navigation is on the top and goes behind the address bar during that time. I was wondering if there is a way I could detect when the address bar is showing and dropping the navigation below the address bar.

If I remove the apple-mobile-web-app-capable meta tag, address bar shows, but the navigation still goes behind it. For some reason Chrome sets the window size to the size of the screen, but pulls the address bar on top of it.

Is anyone aware of any solutions to this?

Answer 1

There is a workaround around this actually; you just have to force your app to scroll down by 1px (enough to hide the Chrome address bar) :

setTimeout(function() {
  // Already scrolled?
  if(window.pageYOffset !== 0) return;

  window.scrollTo(0, window.pageYOffset + 1);
}, 1);