7

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?

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
user979331
  • 11,039
  • 73
  • 223
  • 418

3 Answers3

7

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

Viewport Height without address bar

enter image description here

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

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
4

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.

ryanpcmcquen
  • 6,285
  • 3
  • 24
  • 37
  • This works, however I still need the image to be in the fixed position so I can do the parallax image – user979331 Aug 17 '17 at 00:19
  • @user979331, in that case just set the `relative` position for mobile, you will still have parallax on the desktop. Parallax feels wonky and slow on mobile anyways. – ryanpcmcquen Aug 23 '17 at 22:23
0

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.

Rijo
  • 2,568
  • 1
  • 22
  • 30