Buttons aligned to bottom of page conflict with mobile Safari's menu bar

Question

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.

Answer 1

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!

Answer 2

I know this question is a bit old, but since the issue still exists I thought I should share my experience...

As of now there is NO fix for the issue, but there is a workaround. The solution jennz0r provided may work for some, but I didn't like the idea of the menu bar always showing. I saw a website that had the issue solved... well it seemed to work at least. I didn't find anything in their css or js.

So what was the fix? Since the "dead zone" is 44px in height they simply made their floating bar 88px height :D Users would instinctively tap on the top/center of the button and it will almost always work at first try!

"If it's stupid, but it works... it ain't stupid..." ;)

Answer 3

It turns out this is the standard behavior in safari mobile and as such can not be overwritten, perhaps in a future IOS update this functionality will change.