iOS 和 iPadOS 上的渐进式 Web 应用程序图标失去透明度

Question

我正在尝试创建渐进式 Web 应用程序。我已经创建了清单和图标，如 https://web.dev/learn/pwa/web-app-manifest 中所述。我可以按预期使用发送到、添加到主屏幕将其安装在 iOS 和 iPadOS 上。

我的测试图标大部分是透明的：

但是，当在主屏幕或扩展坞中渲染时，我的图标会失去透明度，而是显示为黑色背景：

奇怪的是，如果我单击图标启动应用程序，然后向上滑动以返回主屏幕，则在“返回主屏幕”动画期间，该图标会短暂正确显示并具有透明度。然而，不久之后它又变成黑色背景。 这是我用于图标的 PNG 文件：

这是

512-maskable.png

。我正在安装的页面指定：

  <link rel="manifest" href="/open/pwa/app.webmanifest">
  <link rel="apple-touch-icon" href="/open/pwa/icons/512-maskable.png">

我的清单文件是：

{
    "name": "PWA Test",
    "start_url": "/open/pwa",
    "display": "standalone",
    "icons": [
        {
            "src": "/open/pwa/icons/512.png",
            "type": "image/png",
            "sizes": "512x512"
        }, {
            "src": "/open/pwa/icons/1024.png",
            "type": "image/png",
            "sizes": "1024x1024"
        }, {
            "src": "/open/pwa/icons/192.png",
            "type": "image/png",
            "sizes": "192x192"
        }, {
            "src": "/open/pwa/icons/384.png",
            "type": "image/png",
            "sizes": "384x384"
        }, {
            "src": "/open/pwa/icons/512-maskable.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "maskable"
        }
    ]
}

我在这里发布了一段视频，显示动画后透明度消失：

https://youtube.com/shorts/hgDhh-0Mw8I

是否可以在 iOS 和 iPadOS 上保持图标透明？

Answer 1