Выпадающая поисковая строка в моб. браузере ios ломает сайт. Как исправить?

Question

[Aleksandr-JS-Developer]

Пишу сайт. На сайте есть шапка, которая "приклеена" к верху экрана при помощи

position: fixed;
top: 0;

Всё работает хорошо, но до того момента, пока не зайдёшь с хрома на iPhone 6. При вертикальном ориентировании, шапка, а за ней и весь сайт, начинает сдвигается вверх.
Шапка западает за строку поиска. Такое впечатление, что содержимое сайта ориентируется не на реальную высоту видимой области, а на высоту экрана.
При перевороте в альбомную ориентацию, появляется зазор между шапкой и строкой поиска.
Поменяв ориентацию устройства на альбомную и поскроллив вверх-вниз всё становиться нормально и больше не слетает вплоть до перезагрузки окна. В Safari и Firefox (на iPhone 6) всё работает хорошо.
В Chrome на Android (Xiaomi) так-же всё хорошо.

.header {
        top: 0px;
        position: fixed;
        width: 100%;
        max-width: 1140px;
        height: 65px;
        background-color: white;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        padding: 0 calc( ( 100% - 1140px ) / 2 );
    }

Сам сайт довольно объёмный, на Vue-cli.
Из библиотек используется scroll-lock (для удаления прокрутки body на ios)

Кто-нибудь сталкивался с этой проблемой? Такое впечатление, что ни у кого в интернете не случалось такой ситуации (((

Ссылки:
scroll-lock
код сайта на GitHub