Home » Javascript » javascript – Bottom navigation bar on safari mobile does not show up when scrolling up when displaying an iframe with 100vh height

javascript – Bottom navigation bar on safari mobile does not show up when scrolling up when displaying an iframe with 100vh height

Posted by: admin February 24, 2020 Leave a comment

Questions:

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.

How to&Answers:

vh is not supported in Safari, you can use 100% for full height element in css