CSS background images not showing in older versions of iOS [SOLVED]

ionic-v1
1

Interesting situation here while doing final testing for my app which I want to release this week.

I have a CSS background image in the main tab of my tab page app, as so:

<ion-view title="MyApp" style="background-image: url('img/backgrounds/{{ bgImage }}.jpg'); background-size: cover;" hide-nav-bar="true">

As you can see, I am using a generated variable to show different images in the background depending on certain app conditions.

Now, the image shows up perfectly in the iOS emulator, and also on iOS8 devices. However, on iOS7 (iPhone 4S) and iOS6 (iPhone 3GS). The images do not show at all.

(Note: It works perfectly on most versions of Android devices and emulators that I have tested).

Other graphic assets fetched from ‘img/whatever’ all seem to load properly on all version of iOS, but the background image is the one causing a problems here.

Any idea what could be causing this?

2

OK - solved this one! I should stop making a habit of answering my own questions on here… :smile:

Basically, it was to do with the size of the background images that I was using, which were HUGE to try and cover all screen possible screen sizes.

As per this Stackoverflow question: http://stackoverflow.com/questions/9046143/really-long-background-image-does-not-render-on-ipad-safari it appears that the older devices do not support images greater than 3 megapixels (i.e. width x height of image must be less than 3,000,000).

As soon as I used smaller images, they began working on the older devices. They wont scale as pretty on the newer devices, but I guess that is a tradeoff that I will have to live with until we stop developing for anything below an iPhone 5…