Question

我有一个这样的CSS：

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

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

我尝试过的（没有运气）：

使用background-size: contain
使用JavaScript“延迟加载”背景图片。
使用JavaScript动态地将其作为<img>而不是背景图像附加。
直接将其添加到HTML文档中。它开始显示但不遵循任何CSS样式，即使我尝试使用JavaScript样式以及width和height属性（为什么？）也是如此。
使用background-position: top center代替50% 50%。
使用其他图像格式，例如.png。

将背景图像应用于::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

这可能就像我前一段时间遇到的类似问题。

我们唯一能够解决的方法是删除meta标签，使其具有“ apple-mobile-web-app-capable”的功能，并允许用户在Safari中打开它，在一切似乎正常的情况下。

Answer 2

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

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

2 个答案: