Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

We have a simple mobile app running in Mobile Safari (MS) on iOS. When the user scrolls down the page n pixels, a "top" button slides up from the bottom. The top button is fixed position. Problem is, when you start scrolling in MS, the navigation and toolbar UI is hidden. When you tap the "top" button, it reveals the bottom toolbar and a second tap is required to tap the "top" button. Is there any way to disable the default "tap on the bottom part of the viewport to reveal the toolbar" behavior so our top button works as expected (i.e. jumps to the top of the page with one click, not two?

like image 377
typeoneerror Avatar asked Feb 12 '14 00:02

typeoneerror


People also ask

How do I make the top bar of Safari disappear?

Enter full screen mode, right-click anywhere around the address bar then click "Hide Toolbar" in the menu that appears. Although next time you enter full screen mode the toolbar comes back.


3 Answers

No there is not. You can control the content of your webpage but not the behavior of the safari app.

like image 79
Mika Avatar answered Sep 18 '22 19:09

Mika


The simple solution here is to add about 50px padding-bottom on your bottom most div. Safari seems to think that you are trying to access the bottom navigation bar, unless you click well above the bottom area. With extra padding at bottom, the user will click much higher on the page (not always, but in general).

like image 28
Rowan Gontier Avatar answered Sep 18 '22 19:09

Rowan Gontier


Mika and typeoneerror are correct, but there is a workaround.

The best workaround solution I found (that doesn't require minimal-ui) is to force the bottom navigation of iOS Safari to always stay open/visible. That way, clicks to the bottom of the window never open the bottom navigation since it's always open.

To do that, you just need to apply some CSS and browser targeting with JS. Detailed steps on how:

  • How might one force-show the mobile Safari bottom nav bar to show programmatically?
  • Buttons aligned to bottom of page conflict with mobile Safari's menu bar
like image 26
jennz0r Avatar answered Sep 18 '22 19:09

jennz0r