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

Answer 1

I believe the height: 100% is the way to go. It seems this seems to make Safari think that it might as well show the bar as no content is trying to go behind it, and then you add scroll within you 100% height element.

My issue was different as my button was in a fixed position modal, I didn't want the Safari bottom nav to show all the time but when my mobile filter nav opened it needed to be shown.

Essentially applying the code below (e.g. on menu-open class). and then positioning menu as position: fixed and height: 100%

html.menu-open {
    height: 100%;

    body {
        position: fixed;
        width: 100%;
        top: 0px;
        overflow: hidden;
    }
}

.menu {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: auto;
}

working example here:

https://www.electronicsadvisor.com/products/51/washing-machines-tumble-dryers

1. Open link
2. scroll down to hide safari bottom nav
3. click the filters button near the top of screen

The Filter menu will open and force the safari nav open.

Screenshots from example:

Before the filter button clicked:

Then when opening nav with js I apply styles above and the nav is forced open