Wordpress Twenty Seventeen Header Scroll Mobile Zooms in

I am using WordPress Twenty Seventeen for my website and I am having an issue with my header image on mobile. When I go to start scrolling, the header image kinda zooms-in, I have tried to google this issue but came up with nothing, I've tried going through the CSS code and don't see any transitions or the elements changing when I inspect them, Here is an example site:

[To see links please register here]

The header image is shorta zooms in when you start scrolling, is there away to prevent this so it stays the same size before scroll?

Add `position: relative;` to your cover `img`:

.wp-custom-header img {
position: relative;
}
The current position is `fixed`, which in conjunction with `object-fit: cover;`, is causing the zoom effect.

This is happening because mobile-chrome calculates the address bar into the viewport height and while scrolling webpage the address bar scrolls too and the visible area changes it's height dynamically.

E.g. on `320px X 360px` screen, on mobile-chrome with address bar the height of viewport is `564px` and after scroll when address bar disappears, the height of viewport changes to `620px`.


----

**Viewport Height with address bar**

[![enter image description here][1]][1]

----
**Viewport Height without address bar**

[![enter image description here][2]][2]


----

Now `image` in `.wp-custom-header` taking `min-height:100%;height:100%` which will change height dynamically, therefore image changing it's dimension while scrolling.

Better way is to fix height of image in pixels in `media queries`.

.has-header-image .custom-header-media img{
height: 620px;
min-height: 0;
}




Similar issue:

[css3-100vh-not-constant-in-mobile-browser][3]


[1]:

[2]:

[3]:

[To see links please register here]

You can try following css:

html, body {
height:100%;
}
html {
overflow: hidden;
}

body {
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}

This will prevent the browsers from hiding address bar. So we will get rid of the jump while we scroll.

I have tried this in your url and it is working.
I suggest to use this in appropriate media queries.