0

my first post here.

Something on my own website is bothering me for a really long time. The thing is that when I'm visiting my website on my Android phone and scroll through the page, the background image keeps 'adjusting', so there is a stutterlike event continiously occuring when scrolling through the website. You can visit it here: http://www.bramvalstar.nl

The background class:

.achtergrond {
position: relative;
width: auto;
height: 95%;
background: url(media/images/xxx.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;

Thanks in advance.

Condor
  • 199
  • 2
  • 22
  • http://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome – Lee Nov 01 '16 at 13:24

2 Answers2

1

Yeah, that is the affect of using relative page height. You see, when the page loads, the available viewport height is slightly less than 100% as the address bar occupies some space on top. When you scroll down, the address bar disappears and the viewport height jumps back to 100%, thus your page re-adjusts to the new available height. Unfortunately, there is no way to fix this in css. You can either use a fixed height not a relative one, or set the height using javascript at load time.

  • Alright, make things a lot better to understand. But if I visite my page on an iPhone using the Safari browser, the 'adjusting' does not occur.. How can this be explained contrary to the Chrome browser I'm using on my Android phone? – Condor Nov 01 '16 at 14:02
  • Yeah, I read once that apple made a fix for safari, but i am not sure as I don't have iOS device. But this behaviour is consistent accross every android device i have used. –  Nov 04 '16 at 17:50
0

hope this is what you are looking for .achtergrond {background-attachment:fixed;}

Aru
  • 1,840
  • 1
  • 12
  • 15
  • This is not exactly what I was looking for, but maybe if I'm not able to fix it because of the relative position, I'll go for this option! Thank you. – Condor Nov 01 '16 at 13:59