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

Question

我有一个这样的 CSS：

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

它在 iOS Safari 和其他任何地方都显示良好。但是，当我“添加到主屏幕”页面时，图像不会显示。

我尝试了什么（没有运气）：

1. 使用background-size: contain

2. 使用 JavaScript “延迟加载”背景图像。

3. 使用 JavaScript 将其动态附加为 <img> 而不是背景图像。

4. 将其直接添加到 HTML 文档中。它开始显示但不遵循任何 CSS 样式，即使在我尝试使用 JavaScript 样式以及 width 和 height 属性（为什么？）之后。

5. 使用background-position: top center 代替50% 50%。

6. 使用其他图片格式，如.png。

7. 将背景图像应用于::after 伪元素，如下所示：

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

它只是不能正常工作。

我在 StackOverflow 和 Google 上搜索了相同的问题，没有一个遇到相同的问题，因为他们中的大多数都指的是 Safari 浏览器和不支持的 CSS 属性中的问题（这不是我的问题）。

有谁知道可能是什么问题以及如何解决？

此问题仅发生在“添加到主屏幕”之后。它在 iOS Safari 浏览器和 iOS Chrome 浏览器中运行良好。

Answer 1

这可能与我不久前遇到的类似问题。

我们能够做的唯一解决方法是删除元标记，使其具有“apple-mobile-web-app-capable”，并让用户在 Safari 中打开它，一切似乎都正常工作。

Answer 2

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