I'm working on a mobile website and with the release of Safari on iOS 7 I'm having the following issue. The website sometimes shows save/cancel buttons positioned at the bottom of the visible window. Now in iOS 7 the user has to tap twice to trigger the button. This is happening because iOS 7 Safari responds to the first tap by showing its own bottom bar (with the back/forward, share, bookmarks and tab buttons). Only when this bar has appeared another tap on the website's button will trigger it.

Does anyone have any suggestions on how to work around this? No more buttons at the bottom of the view...?

  • I've never encountered the iOS buttons: I get the system thingy (brightness, playback, wireless etc controls) which is VERY VERY ANNOYING. – Andrew Leach Oct 18 '13 at 11:39
  • @AndrewLeach that's when you swipe up from the bottom. If you tap just at the bottom (and the safari bottom bar is not visible; it will hide when you start scrolling down), the Safari bottom bar will appear. – René Oct 18 '13 at 12:17
  • 1
    Having the same problem here. Trying to solve it by adding the property 'minimal-ui' to the viewport meta tag (mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs): "The hidden toolbars will appear as modal windows only after a tap on the top portion of the screen (compared to top or bottom on mormal mode)." Didn't get it to work so far though. – dkhgh Apr 8 '14 at 9:51

I've just come across this too. I was using a web app which had a lot of buttons at the very bottom of the page. I constantly had to tap the bottom, then when the safari menu flicks up, tap the button again for it to register.

Not sure how well thought out this was on Apple's behalf. However it seems that if we're hoping for our sites/apps to give the best UX possible to ios7 safari users then we'll have to avoid placing buttons in that region of the screen. Its a shame really.

  • Apple did allow a minimal-ui meta tag in iOS 7 but it's no longer available in iOS 8, so the issue still persists as of mid-2015. – Simon East Jun 30 '15 at 11:44

A little bit of padding below your button should solve the issue.

  • How much padding will avoid Safari's "tap zone"? – Jonathan Julian Jan 21 '14 at 16:28
  • Probably 30-50px worth should be fine, but try experimenting and see what feels best – Joe Taylor Feb 3 '14 at 13:59
  • 69px on portrait, 45px on landscape – Javarome Jan 8 '16 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.