I am using WebView and WebPage to display web pages. Some web pages have content fixed to the top of the screen (like apple.com). When this happens, content is under the status bar (like menu buttons), and I cannot tap them.
My work around is to put the WebView in a VStack with the top being Color.clear.frame(height: 44). It isn't very elegant, especially since it is applied to all pages and not just pages with fixed content at the top.
Is there a more Apple-y way to solve this?
For example, Safari seems to detect these situations and puts something like Color.clear.frame(height: 44) in those cases but not other cases.
Here is sample code:
import SwiftUI
import WebKit
struct ContentView: View {
@State private var page: WebPage
init() {
let configuration = WebPage.Configuration()
page = WebPage(configuration: configuration)
let url = URL(string: "https://www.apple.com")!
let request = URLRequest(url: url)
page.load(request)
}
var body: some View {
WebView(page)
}
}
Here is a screenshot of Apple's page in WebView with the menu
Here is a screenshot of Apple's page in Safari. It appears to have inserted a spacer frame at the top for Apple's page (but not, for example, my own web site which doesn't have this problem).