Почему в браузере Safari не работает данный media запрос?

Question

[Viktor Burdale]

Здравствуйте. Сверстал сайт. Проверил его в популярных браузерах, на всех все как нужно отображается, а в safari беда..
Регулирую отображение медиа-запросами. Проверяю на Safari в режиме отзывчивого дизайна. И вижу что в Safari на мобильном устройстве не работает именно этот код:

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

Работает только этот код:

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;
}

Медиа-запрос с header расположен ниже основного header.
Другие медиа-запросы работают. Только с этим что-то не так. Думал может проблема в "vh", изменил на "px" - не помогло.. Помогите пожалуйста с решением проблемы. Куда копать?

Answer 1

[Максим Литвинов]

Может у сафари высота по другому считается и получает высоту например 605рх? Попробуйте поиграть с высотой и шириной. Сафари он такой...

Comments

[Viktor Burdale]

Дело не в высоте, т.к другие медиа-запросы работают с такими же данными. У меня есть версия, что Safari "не любит" media (max- .. ), потому, что если изменить с этого:

(max-width: 320px) and (max-height: 600px)

на это:

@media (min-width: ...) (min-height: ...) { }

Вышел с положения, что переписал весь код начиная от меньше точки, и увеличивая уже - media (min-width: ...)