仅在添加到主屏幕后，背景图像才不会在iOS上显示

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):

1. Using background-size: contain

2. Using JavaScript to "lazy load" the background-image.

3. Dynamically appending it as an <img> instead of a background-image using JavaScript.

4. 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?).

5. Using background-position: top center instead of 50% 50% .

6. Using other image format such as .png .

7. 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.

Answer 1

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.

Answer 2

尝试将background-image: url(...)替换为background: url(...)