Why doesn't this media query work in Safari browser?

Question

css

Hello. Made the site. I checked it in popular browsers, everything is displayed as it should be, but in safari it's a problem .. I
adjust the display with media queries. Testing on Safari in responsive design mode. And I see that this code does not work in Safari on a mobile device:

@media (max-width: 320px) and (max-height: 600px) {
    header {
        height: 130vh;
    }
}

Only this code works:

header {
height: 100vh;
overflow: visible;
background: url(../../img/header-bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

A media query with a header is placed below the main header.
Other media queries work. There's just something wrong with this. I thought maybe the problem is in "vh", changed it to "px" - it did not help .. Please help with solving the problem. Where to dig?

Answer 1

Maybe safari has a different height and gets a height of 605px for example? Try playing with height and width. Safari is so...