Wordpress Twenty Seventeen Header Scroll Mobile Zooms in

Question

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:

https://2017.wordpress.net/

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?

Answer 1

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

---

Viewport Height without address bar

---

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