CSS Background gives inconsistent result on Android

[md_lasalle]

Hi all, I was trying to optimize our mobile experience, so instead of including a big background image in on of my texture sheets, I've made it into a simple .jpg image and set that as a CSS background with the following properties :

body {
  margin: 0;
  padding: 0;
  background: url('assets/images/bg.jpg') no-repeat center center fixed;
  background-position: 50% 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

On iOS and desktop Chrome + Safari, the behaviour is as expected, but on Android Chrome, it seems to affect my Canvas size, as if the canvas was bigger than the whole screen. The weird thing is as I hit refresh multiple times, the behaviour changes from having correct canvas size to incorrect.

If there is no way around that, I'm just going to go back to my background being part of my texture atlases.

Thanks for any input!

Edit: after playing around a bit with how I create Phaser's game object, I just realized that Android does not treat screen density like iOS does (ie. Retina vs xhdpi etc), so I basically added code so that on Android width and height are "100%" with a scale mode of RESIZE, and on iOS width and height are window.innerWidth * window.devicePixelRatio with a scale mode of SHOW_ALL and everything seems to behave correctly now. Let me know if you see any issues with my approach, thanks!