0

On Chrome Mobile, the background of my website is very bumpy and glitches up and down with white sections. As far as I know it's because of the URL bar that hides.

The CSS I use to add the background:

html {
  background: url(user-images/background.png) no-repeat center center fixed;
  background-size: cover;
}

I'd like to fix this using CSS, but if I have to use Javascript I'd really like a simple explanation of how it works and how I should add it to my code, since I haven't used any Javascript yet.

Thanks in advance!

Cœur
  • 37,241
  • 25
  • 195
  • 267
jvnknvlgl
  • 157
  • 1
  • 9
  • You should look up how to inspect your android chrome with your desktop chrome. It's simple, turn on debug mode then go to chrome://inspect I think. The issue is probably related to the browser menu bar disappearing, changing the height of the viewport, and this forcing a recalculation. – Radley Sustaire Feb 21 '15 at 19:11
  • I agree with @RadGH. Try replicating the issue within Chrome's development tools as well. – Zach Shallbetter Feb 21 '15 at 19:13
  • @RadGH is seems the toolbar doesn't hide when in inspect mode, or my device is too laggy to do so. Either way, I can't use this to investigate the issue. – jvnknvlgl Feb 21 '15 at 19:33

2 Answers2

0

0:14 into the video makes me almost certain this is because of the menu bar being hidden off the top of the screen.

When this happens, the height of the page changes. This correlates directly with your min-height and max-height values.

Try this and see if it helps. It might not. No min/max height applied.

html {
  background-image: url("user-images/background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

Theory:

By supplying max-height, your body height is being limited to the available screen space. If this were removed, the body height would be the size of the entire document, the entire scrollable area, even if it is not visible.

This should eliminate the flicker, but might affect the background-attachment. Because you are using fixed attachment, though, this should still work as expect.

Radley Sustaire
  • 3,382
  • 9
  • 37
  • 48
  • I'm sorry, that doesn't fix it. I edited the OP with my new updated code (I did some cleanup) and I added a demo site and my Github repository. – jvnknvlgl Feb 21 '15 at 21:04
  • You may also be interested in [this](http://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome) related question that did have an answer. – jvnknvlgl Feb 21 '15 at 21:06
0

Thanks to And7s from reddit I fixed it!

The clue was adding an extra div with the background to my code, and then using some Javascript on that div.

Here's the Javascript:

window.onload = function() {
  document.getElementById('background').style.height= (window.innerHeight+56)+'px';
  }
jvnknvlgl
  • 157
  • 1
  • 9
  • Don't forget to take into account the fact that the user can rotate the device. If the user started out in landscape, the div#background would not reach the bottom once the device was rotated in portrait. So, also use **window.onresize = ...** – Daniël Teunkens Apr 03 '15 at 10:30