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


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:
And on the iphone the situation is this:

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