21

I am building a web-portal which has to be functional and pretty on multiple platforms. One of the platforms is IOS Safari, and this is were I encountered a problem. In my code I align two floating buttons to the bottom of a div with a width and height of 100% This all works fine and my buttons show up exactly like they are supposed to on the bottom of the page. However when I click the buttons the compact view from mobile safari switches to full view and my buttons are hidden behind the bottom nav bar!

Is it normal behavior for safari mobile to show the expanded menu when the user taps in the bottom 10% of the screen? How can I avoid this?

In this gif you can see the problem on the IOS simulator: example
As you can see the problem only occurs when a button is in the lower 10% of the view. This is just a normal button, My code was triple checked by several developers and it has no errors.

Improve this question
3
  • If you list your code snippet, flag this and we can migrate to stack overflow...
    – bmike ♦
    Commented May 15, 2014 at 16:41
  • I've created bug for Safari, please comment there: bugs.webkit.org/show_bug.cgi?id=194235
    – sheerun
    Commented Feb 4, 2019 at 20:48
  • Still nobody has fixed this?
    – Anthony
    Commented Aug 23, 2020 at 0:02

2 Answers 2

Reset to default
6

This is normal behavior in Mobile Safari, tapping at the bottom will display the various browser options and scroll the web page up accordingly. Web page functionality stays the same though, so the user can still tap on the button after it scrolled to access whatever functionality it has.

Improve this answer
4
  • 4
    Thanks Patrix, I know this is normal, but is there a way to override this behavior through html, css or js? I have already posted this question on stack overflow but since it is something related to apple maybe ask-different will know a way
    – dennismuijs
    Commented May 15, 2014 at 8:31
  • 1
    StackOverflow (or even an SE site where web developers hang out) is better for this kind of thing than AD (which is focused on end user issues). As accessing browser controls is somehow essential for the user I doubt whether there is a way to avoid the behavior though.
    – nohillside ♦
    Commented May 15, 2014 at 8:37
  • link to the stack overflow q&a for this?
    – B Robster
    Commented Aug 1, 2018 at 18:38
  • what's the actual size of this in pixels? Can't find it anywhere... 56px isn't enough. What's the name of this "dead zone"?
    – creamcheese
    Commented Sep 29, 2021 at 11:42
9

I think I may have found an answer. Setting your content to have the following styles:

  • height: 100% (allows content to fill the viewport and go beyond the bottom)
  • overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
  • -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!

Improve this answer
3
  • 2
    Sure, this does works, but not all sites can tolerate setting overflow-y: scroll on their main content area. This hack has side effects that will affect all it's children elements. To put it more correctly, these css properties directly effect all children elements and forcing the safari menu to show is actually the side effect.
    – zevdg
    Commented Oct 16, 2018 at 20:17
  • 1
    Thanks. Haven't tried tapping towards bottom of screen yet but at least 10% of my design isn't being covered up by Safari's obnoxious menu bar. To add to this, you need to give every containing element height: 100% as well. For a company that makes a lot of their money from mobile devices their mobile web experience is horrible.
    – corysimmons
    Commented Sep 26, 2019 at 3:29
  • 2
    @corysimmons As we have seen with WebRTC and still see with Push API, Apple is trying to get developers to create a native app if you want significantly more than just display a simple page.
    – Marcel Waldvogel
    Commented May 3, 2020 at 20:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .