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!