'Background-size: cover' not working on Android

@theHamster wrote:

Hi,

I’m tearing my hair out! I’ve been fighting this issue for 3 days, searched every forum and tried at least 50 ideas but I can’t seem to find a fix.

The problem: ‘Background-size: cover’ is not working on my physical Android device. It’s a fairly new device running Android 8+ and I’m not sure what version of Android browser.

To troubleshoot, I started a new blank Ionic 3 project (also tested with 4) and created a new home page…

home.html:
<ion-header>
  <ion-navbar>
    <ion-title>home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content fullscreen padding>

</ion-content>
home.scss:
page-home {
  ion-content{
    background: #fff url('../../assets/imgs/bg5.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}
bg5.jpg for testing is a large (4672 × 3104) landscape aspect image.

My app only uses portrait mode, and I want the background image to preserve aspect, position in the dead centre of the screen, cover the full screen and not repeat.

On browser ($ionic serve) the display is perfect:

e6b1fd8cb9ae5bb7e6748c07c8121e58.jpg2880×1370 507 KB

Also perfect on a built iOS app:

c0228be053f419548b7c2480710989c9.jpg794×1366 164 KB

But not at all working correctly on Android device:

a05906634f489d426991c3fc6e6d7cac.jpg618×1276 156 KB

It seems to be displaying a portion of the image from the bottom right corner and hasn’t resized/cropped correctly.

I won’t list everything I’ve tried immediately, as it’ll make for a huge post, but I will say one of the things I checked was cross-browser compatability on background-size. I read that some older Android browsers don’t like short-hand so I tried to be explicit on that. Didn’t help though.

Please could someone help me out with this - I’m totally beat! Thanks