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

Hello!

Made a menu for the mobile resolution. Menu on a mobile phone 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.3 s ease-in-out;
 -webkit-transition: all 0.3 s ease-in-out;
 -o-transition: all 0.3 s ease-in-out;
 transition: all 0.3 s ease-in-out;
}


In this case, when calling the menu, I cling to body overflow: hidden, because the menu has its own vertical strip:

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


On android everything is OK, looks like this:
5cf651097074b316191507.png
And on the iphone the situation is this:
5cf6593ca4935575690257.png


Beyond that:
  1. Positioning is not regarding body, although fixed on idea should, and relative to the cap
  2. 100vh is not working
  3. overflow: hidden from body - also, as you scroll, say, left


Everything is complicated by the fact that there is no way to test on the iphone.

Has anyone encountered similar problems?
I would greatly appreciate answers.
March 23rd 20 at 19:02
1 answer
March 23rd 20 at 19:04
It's all cool. What to do with it? There is an option to stretch to 100% height of the screen on Safari? Despite the fact that fixed too, in the course sloppy work because stretches relative to the cap and not the body of the Doc - zula commented on March 23rd 20 at 19:07

Find more questions by tags SafariCSS