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

Question

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.

Answer 1

Safari 不支持 vh，您可以在 css 中使用 100% 的全高元素