3

So I'm working on a web application that has a fixed bar on the bottom. In order for this to behave like a truly fixed bottom bar, in mobile Safari it is necessary to use position: fixed on the content above it (with bottom set to the height of the bottom bar) and also set -webkit-overflow-scrolling: touch on this content in order for it to scroll as if it weren't fixed.

The problem is that if Safari's bottom bar is hidden and then you try to click on our app's bottom bar, this will make Safari's own bottom bar appear, but without triggering a resize event which will effectively hide our app's bottom bar even though it has position: fixed. Safari's bottom bar normally goes away once you scroll the content, except that our content has -webkit-overflow-scrolling: touch; set, so it apparently doesn't trigger UI hiding.

I'm looking for a way to either prevent Safari's bottom bar from popping up when clicking at the bottom of the page, or being able to hide the UI when scrolling, even if the content that is scrolled has -webkit-overflow-scrolling: touch; set. Thanks.

JayPea
  • 9,551
  • 7
  • 44
  • 65
  • possible duplicate of [Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch](http://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch) – LeBen Mar 12 '14 at 12:32

1 Answers1

0

By using the minimal-ui meta content tag in IOS 7.1, this can be achieved.

<meta name="viewport" content="width=device-width, minimal-ui">

Read more about it here. When IOS 7 just came out, this was a huge problem for iphone apps, because the Safari interface stole so much screen real estate. Especially with iPhone 4 where the screen is so much smaller.

Kenny Bones
  • 5,017
  • 36
  • 111
  • 174
  • Thanks, but I did try this before and I can confirm that it doesn't make a difference for the particular scenario that I described. – JayPea May 14 '14 at 17:20