时间戳

首页 > 解决方案 > 背景图像仅在添加到主屏幕后才在 iOS 上显示

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

问题描述

我有一个这样的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. <img>使用 JavaScript将其动态附加为背景图像而不是背景图像。

  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 浏览器中运行良好。

标签： javascripthtmlioscsssafari

解决方案

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

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

推荐阅读