提问人：River 提问时间：5/28/2022 最后编辑：River 更新时间：6/1/2023 访问量：587
iPhone / Safari 上的渐进式 Web 应用程序级滚动行为显示主题背景
Progressive Web App app-level scrolling behavior on IPhone / Safari is displaying theme background
问：
我试图摆脱从 iPhone 主屏幕启动时渐进式 Web 应用程序烦人的应用程序级滚动行为。当用户在应用上向上或向下推时，将显示 PWA 的背景主题颜色。当然，我想要一种更“像应用程序”的感觉，而它没有这样做。这似乎只发生在 iPhone 上的 Safari 上——Android 上的 Chrome 不是这样。我尝试过的相关CSS如下。 在 Web 清单中，我尝试了 “display”： “standalone” 和 “display”： “fullscreen”。我在这里制作了一个 13 秒的 YouTube 视频：https://youtube.com/shorts/6uP7VxZ1mdE
html, body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
overscroll-behavior-y: contain;
overscroll-behavior-x: contain;
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
}
答：
2赞
kakaiikaka
6/1/2023
#1
请在这里分享我的理解：
让我们首先找出这种行为的名称。
iOS 上的 Safari 是由 WKWebView 编写的（Chrome 也使用它，至少目前是这样），并且 WKWebView 具有以下属性： .请参阅文档链接：此处。它将尝试将滚动视图的背景颜色设置为html正文元素的颜色。underPageBackgroundColor
Web 视图从 页面的内容，将 和 元素的背景色与 Web 视图的背景色一起使用。要覆盖，请执行以下操作 默认颜色，请将此属性设置为新颜色。
<html><body>
所以比较一下Safari和其他浏览器的设计：Safari顶部没有地址栏，它使用页面的颜色来填充顶部的安全区域，而Chrome则没有这个问题。它的顶部有一个固定的地址栏。
如果我们在自己的应用程序中实现自己的 WebView，我们可以将其覆盖为我们想要的任何颜色。但是要在 Safari 中删除它，除非您将身体的背景颜色设置为透明，否则没有办法。
评论
overscroll-behavior: none;