10

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...?

Improve this question
3
  • I've never encountered the iOS buttons: I get the system thingy (brightness, playback, wireless etc controls) which is VERY VERY ANNOYING.
    – Andrew Leach
    Commented Oct 18, 2013 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é
    Commented Oct 18, 2013 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
    Commented Apr 8, 2014 at 9:51

2 Answers 2

Reset to default
4

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.

Improve this answer
1
  • 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
    Commented Jun 30, 2015 at 11:44
1

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

Improve this answer
3
  • How much padding will avoid Safari's "tap zone"?
    – Jonathan Julian
    Commented Jan 21, 2014 at 16:28
  • Probably 30-50px worth should be fine, but try experimenting and see what feels best
    – Joe Taylor
    Commented Feb 3, 2014 at 13:59
  • 69px on portrait, 45px on landscape
    – Jérôme Beau
    Commented Jan 8, 2016 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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