safari IOS menu bar conflicts with buttons in lower 10% of the screen

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:
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.

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.

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!