HomeiOS DevelopmentThe right way to make fullscreen WebView on iOS 26 play good...

The right way to make fullscreen WebView on iOS 26 play good with the standing bar / dynamic island


I am making an attempt to create an SwiftUI iOS app with a fullscreen WebView and having hassle with content material going behind standing bar. Eg with the next code:

import SwiftUI
import WebKit

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

After I load webkit.org (on an iPhone 15 Professional Max, iOS 26.0.1) the highest of the web page is obscured by the standing bar and dynamic island. In distinction, Safari shows a strong shade underneath the standing bar and offsets the beginning of the web page. When the consumer scrolls, Safari does enable the content material to go underneath the standing bar however there’s a darkening impact which retains the standing bar readable.

App utilizing WebKit on load Safari on load Safari after scrolling
The right way to make fullscreen WebView on iOS 26 play good with the standing bar / dynamic island

Loading stackoverflow.com has a barely totally different concern. On web page load the content material is appropriately positioned beneath the standing bar however when the consumer scrolls the content material seems beneath the standing bar, above stackoverflow’s menu bar. Safari would not have this concern.

App utilizing WebKit on load App utilizing WebKit after scrolling Safari after scrolling

How can I obtain comparable habits to Safari?

Ideally it will be similar however I might accept the standing bar being a strong shade the entire time, hiding the content material beneath.

I’ve experimented with making use of:

  • .safeAreaPadding(.prime)
  • .ignoresSafeArea([])

however these do not appear to have any impression.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments