How might one force-show the mobile Safari bottom nav bar to show programmatically?

Question

I have a fixed button for a CTA (call to action) at the bottom of my web page. Scrolling down the page on newer version of iOS, mobile Safari hides the bottom navigation bar (with back, forward, share, bookmark, and new tab buttons). If you click on the CTA button, instead of executing that action, mobile Safari shows the bottom nav bar.

As a solution, I was looking to alway force-show the bottom nav bar. Is there a way of doing this? Both Jack Threads when viewed on mobile, and Thread Flip's mobile site are able to pull this off when viewing an individual item.

I'm unable to reverse engineer this so far. Does anyone know how the force-show is accomplished?

Related to: Buttons aligned to bottom of page conflict with mobile Safari's menu bar and Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

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.

Unfortunately, you have to pair this CSS with JavaScript browser detection because it messes up the scrolling on iOS Chrome (also webkit). There's no way to target all versions of iOS Safari only using only CSS.