title: Buttons aligned to bottom of page conflict with mobile Safari's menu bar
body: <p>I am building a web-portal which has to be functional and pretty on multiple platforms.<br>
  One of the platforms is IOS Safari, and this is were I encountered a problem.<br>
  In my code I align two floating buttons to the bottom of a div with a width and height of 100%<br>
  This all works fine and my buttons show up exactly like they are supposed to on the bottom of the page.<br>
  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! <br><br>
  Is it normal behavior for safari mobile to show the expanded menu when the user taps in the bottom 10% of the screen? <br>How can I avoid this?<br><br>
  In this gif you can see the problem on the IOS simulator:<br><img src="https://i.stack.imgur.com/ur8oE.gif" alt="example"><br>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.</p>