Safari滚动超出视口出现黑色背景问题求助

• 添加适配视口的元标签
  Safari对PWA的theme_color支持存在局限，需在HTML的<head>中添加如下元标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

  该标签可让页面完全覆盖视口，减少滚动时暴露的空白区域。

• 设置页面根元素背景色
  直接给html和body设置与主题色一致的背景色，同时规范滚动行为：

  html, body {
    background-color: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
  }
  

  确保滚动露出的区域与页面背景色统一，掩盖黑色线条。

• Safari专属CSS适配
  利用Safari私有前缀针对性设置滚动区域背景：

  @supports (-webkit-touch-callout: none) {
    html {
      background-color: #ffffff;
    }
  }
  

  部分场景下Safari会优先渲染html的背景而非body，此设置可规避该问题。

• 完善manifest配置
  除theme_color外，补充background_color配置并保持两者一致：

  {
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
  }
  

  Safari处理PWA时，background_color会直接影响滚动露出区域的颜色。

内容的提问来源于stack exchange，提问作者kkkkkkkkkkkkkkkkk