What happens to overflow hidden, position fixed and 100vh in safari browser?

Question

css

Hello!
Made a menu for mobile resolution. The menu on mobile is positioned fixed + has a height of 100vh:

.th-nav-main {
    position: fixed;
    left: -105%; // 
    top: 0;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    z-index: 999;        
    background-color: rgba(0,0,0,0.95);        
    box-sizing: border-box;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

At the same time, when the menu is called, I cling overflow: hidden to the body, because the menu has its own vertical stripe:

.th-overflow-hidden {
    overflow: hidden; 
}

On android everything is ok, it looks like this:

And on iphone the situation is like this:

It turns out that:

1. Positioning is not relative to the body, although with fixed it should, in theory, but relative to the header
   
2. 100vh not working
   
3. overflow: hidden for body - too, because scrolling, they say, remained
   

Everything is complicated by the fact that there is no way to test on the iphone.
Has anyone encountered similar problems?
I would be very grateful for answers.

Answer 1

https://caniuse.com/#search=vh in point 3 of the notes