iosswiftuiwebviewwebkitios26

How to make fullscreen WebView on iOS 26 play nice with the status bar / dynamic island

I'm trying to create an SwiftUI iOS app with a fullscreen WebView and having trouble with content going behind status bar. Eg with the following code:

import SwiftUI
import WebKit

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://webkit.org"))
    }
}

When I load webkit.org (on an iPhone 15 Pro Max, iOS 26.0.1) the top of the page is obscured by the status bar and dynamic island. In contrast, Safari displays a solid color under the status bar and offsets the start of the page. When the user scrolls, Safari does allow the content to go under the status bar but there is a darkening effect which keeps the status bar readable.

App using WebKit on load Safari on load Safari after scrolling

Loading stackoverflow.com has a slightly different issue. On page load the content is correctly placed below the status bar but when the user scrolls the content appears below the status bar, above stackoverflow's menu bar. Safari doesn't have this issue.

App using WebKit on load App using WebKit after scrolling Safari after scrolling

How can I achieve similar behavior to Safari?

Ideally it would be identical but I would settle for the status bar being a solid color the whole time, hiding the content beneath.

I have experimented with applying:

but these don't seem to have any impact.

Solution

  • I believe this is a bug. While scroll views are designed to extend beyond the safe area so that the content is not clipped at the edge of the safe area, their content should also be inset by the length of the safe area. The scroll view presenting the web content is apparently not insetting its content.

    For now, I suggest just using SwiftUI Introspect to set contentInsets through the actual WKWebView.

    WebView(url: URL(string: "https://webkit.org"))
    .introspect(.webView, on: .iOS(.v26)) { webView in
        webView.scrollView.contentInsetAdjustmentBehavior = .always
    }

    If you are fine with the web view not extending beyond the safe area, you can also just add a tiny padding (at least one pixel) to the top of the web view,

    @Environment(\.pixelLength) var onePixel

// ...

WebView(url: URL(string: "https://webkit.org"))
    .padding(.top, onePixel)