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?

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?

• javascript
• ios
• css
• google-chrome
• web-applications

• 1 This is driving me crazy, too. Exactly the same issue. When the user's scroll delta is negative, then the address bar pops in, hiding my navigation. The resize event is even fired. – oliverseal Commented May 20, 2013 at 5:54
• Yeah, haven't been able to find a proper solution to this so far. – Mehdi Commented May 31, 2013 at 13:56
• Mehdi: is the issue resolved. Me too facing the same issue. – Wasim Commented Jul 22, 2013 at 15:13

1 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);