Background images does not display on iOS only after adding to Home Screen

Question

I have a css like this:

#thumbnail {
    background-image: url(bla.jpg),
    background-size: cover,
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

It is showing fine on iOS Safari and everywhere else. However, when I "Add to Home Screen" the page, the image will not be shown.

What I tried (with no luck):

Using background-size: contain
Using JavaScript to "lazy load" the background-image.
Dynamically appending it as an <img> instead of a background-image using JavaScript.
Adding it straight into HTML document. It starts displaying but does not obey any CSS style, even after I try it with JavaScript styling, and with width and height attribute (why?).
Using background-position: top center instead of 50% 50%.
Using other image format such as .png.

Applying background-image to ::after pseudo-element like below:

#thumbnail::after {
    content: '';
    display: block;
    padding-top: 100%;
    background-image: url(...),
    background-size: cover,
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

It just doesn't work properly.

I searched StackOverflow and Google for the same problem, none facing the same issue as most of them are referring to problems in Safari browser and non-supported CSS property (which isn't the problem in my case).

Does anyone know what could be the problem and how to solve it?

This problem only occur after "Add to Home Screen". It works perfectly fine in iOS Safari browser and iOS Chrome browser.

Have you checked these: https://stackoverflow.com/questions/17341728/background-image-not-showing-in-safari ... https://stackoverflow.com/questions/12824099/ipad-2-safari-not-showing-progressive-jpg-files — Asons, Jul 24 '18 at 10:05
@LGSon yes I checked but it was 5 years ago and it was only the case in Safari, which is not a problem in my case — yqlim, Jul 25 '18 at 01:17

score 0 · Answer 1 · answered Jul 23 '18 at 08:58

0

This might be like a similar issue I had a while ago.

The only workaround we were able to do is to remove the meta tag for it to be "apple-mobile-web-app-capable" and let users to open it in Safari, where everything seems to work normally.

answered Jul 23 '18 at 08:58

Iyad

166
1
12

that certainly is a way but then it defeats the purpose and experience of adding it to home screen. – yqlim Jul 23 '18 at 09:24

score 0 · Answer 2 · answered Jul 23 '18 at 09:16

0

try replacing background-image: url(...) with background: url(...)

answered Jul 23 '18 at 09:16

Ingus

1,026
12
34

Background images does not display on iOS only after adding to Home Screen

2 Answers2