1

I'm looking for a solution that prevents the Chrome Address Bar from hiding on an iPhone/iPad, when scrolling down. MailChimp has gotten this to work. If you're logged in to MailChimp and using an iPhone/iPad you'll notice the Chrome Address Bar is locked at the top. The elastic scrolling is still in place, but that Address Bar is locked in place. Thank you!

Philip Ferreira
  • 113
  • 2
  • 9

1 Answers1

0

Set your body element's height to be correct size. For web apps without the address bar I think it's supposed to be height: 672px !important; See this question:

iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

Community
  • 1
  • 1
Bjorn
  • 69,215
  • 39
  • 136
  • 164
  • 1
    Thanks Bjorn Tipling. While that does prevent auto-hiding, I can no longer scroll down if the page is below the fold, even with overflow-y:scroll. I like this solution, but it's not quite there. – Philip Ferreira Jan 27 '15 at 21:22
  • Make a container div with y-axis scrolling that envelopes the rest of your content. – Bjorn Jan 27 '15 at 21:26
  • I added scroll to an envelope div, which does give me the ability to scroll on y-axis, but because it's a div scroll versus the browser scroll, it's not quite as smooth when compared to the MailChimp solution. This approach also loses the elastic scrolling effect. So far the best solution though; – Philip Ferreira Jan 27 '15 at 21:46
  • Have you tried looking at MailChimp's css? Also try setting the css on HTML instead of body. I'd have to experiment at this point. – Bjorn Jan 27 '15 at 22:02