I have an element on the page that, when clicked, adds a div to the page that contains an iframe.
After clicking the element every element in the body is hidden and the container with the iframe is the only thing seen on the page.
The container div of the iframe has a min-height of 100vh and the iframe has a height of 100vh.
When scrolling up on the page on mobile using Safari (when only the container and the iframe is exposed) the bottom navigation bar does not show up as it would normally.
The bottom navigation only shows up when I click the url bar at the top of the screen and when the bottom navigation does show up it does not go away unless I reload.
Why isn’t the bottom navigation bar showing up when I scroll up on the page? It works before I click the element and expose the container with the iframe but it is not working properly after the click.
vh is not supported in Safari, you can use 100% for full height element in css