Wordpress Twenty Seventeen Header Scroll Mobile Zooms in

Question

I am using WordPress Twenty Seventeen for my website and I am having a problem with my headline on a mobile phone. When I go to start scrolling, the header image is similar to scaling, I tried to solve this problem, but didn’t come up with anything, I tried using CSS code and I don’t see any transitions or elements changing when I check them. Here is an example site:

https://2017.wordpress.net/

The header image zooms out when you start scrolling, is there any way to prevent this from remaining the same size before scrolling?

Answer 1

This is because mobile-chrome calculates the address bar to the height of the viewport, and when scrolling through a web page, the address bar also scrolls, and the visible area dynamically changes its height.

eg. on the screen 320px X 360px on mobile chrome with the address bar, the height of the viewing window is 564px and after scrolling, when the address bar disappears, the height of the viewing window 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 dynamically change the height, so the image changes its size when scrolling.

It is best to set the height of the image in pixels in media queries .

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

A similar problem:

css3-100vh-not-constant-in-mobile-browser

Answer 2

Add position: relative; to your cover img :

 .wp-custom-header img { position: relative; } 

The current position is fixed , which in combination with object-fit: cover; causes a zoom effect.

Answer 3

You can try to execute css:

 html, body { height:100%; } html { overflow: hidden; } body { overflow-y: scroll; -webkit-overflow-scrolling:touch; } 

This will prevent browsers from hiding the address bar. Therefore, we will get rid of the jump while scrolling.

I tried this in your url and it works. I suggest using this in relevant media queries.