Drop-down search bar in mob. ios browser breaks the site. How to fix?

Question

css

I am writing a website. The site has a header that is "glued" to the top of the screen with

position: fixed;
top: 0;

Everything works well, but until you go from chrome to iPhone 6. With vertical orientation, the header, and the whole site behind it, starts moving up.
The header falls behind the search bar. It seems that the content of the site is not oriented to the real height of the visible area, but to the height of the screen.
When flipped to landscape orientation, a gap appears between the header and the search bar.
By changing the orientation of the device to landscape and scrolling up and down, everything becomes normal and no longer crashes until the window is reloaded. In Safari and Firefox (on iPhone 6) everything works fine.
In Chrome on Android (Xiaomi) everything is also fine.

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

The site itself is quite voluminous, on Vue-cli.
From libraries use scroll-lock (to remove body scroll on ios)

Has anyone encountered this issue? It seems that no one on the Internet has had such a situation (((

Links:
scroll-lock