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

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.

My answer is, don't try.

Whilst Jon Catmull's answer technically does force the browser to retain the bottom toolbar. In trials I've experienced a massive performance drop following that setup.

An example of this is with https://www.contiki.com/uk/en, the toolbar appears permanently but the performance loss is noticeable between Chrome and Safari.

After investigating other websites it seems that the world has just accepted that this double-click is a necessary evil.

https://www.bbc.co.uk/news, breaking news appears at the bottom of the browser, if the ui is minimised, the first click returns the bottom toolbar, the second click goes through to the article.

amazon, ebay etc the toolbar is minimised as per the browser defaults. Any clicks to links in the bottom ~30 pixels enable the toolbar.

Whilst there are technical solutions in other answers here, I don't think the double click compares to the performance loss

I'm pasting in a solution mentioned at https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/#comment-119538 in relation to how this is done for https://app.ft.com:

The trick was adding height: 100% to html, and body, and anywhere in the css where it was using 100vh. No js browser detection needed as it causes no quirks in iOS Chrome, Safari fullscreen, or on Android browsers.