WKWebView shows white bar until window moved/resized

user_862627 0
Viewed 123

I'm trying to show a WKWebView in SwiftUI on MacOS. When the app initially loads, the WKWebView has a large, white bar at the top. Moving or resizing the window causes this to immediately disappear and display correctly. Interestingly, the blue border around the view does not exhibit the bad behavior.

My guess is that I'm missing some action in updateNSView.

I'm on MacOS 11.1 Big Sur, Xcode 12.2, Intel. Another thing to note is that I need to enable the "Outgoing Connections" entitlement in the App Sandbox to get WKWebView to render anything at all, even tho the content is provided locally from a string.

import SwiftUI
import WebKit

@main
struct ProblemWKWebViewApp: App {
    var body: some Scene {
        WindowGroup {
            SwiftUIWebView()
                .border(Color.blue, width: 2)
        }
    }
}

struct SwiftUIWebView: NSViewRepresentable {
    public typealias NSViewType = WKWebView
    
    func makeNSView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.loadHTMLString("<body style=\"background-color: red;\"><h1>Hello World!</h1></body>", baseURL: nil)
        return webView
    }
    
    func updateNSView(_ nsView: WKWebView, context: Context) {
    }
}

Demonstrating the behavior

swiftui webkit macos
1 Answers

I had the same problem. I suppose that it is a bug. However I managed to fix it with adding ignoresSafeArea():

@main
struct ProblemWKWebViewApp: App {
    var body: some Scene {
        WindowGroup {
            SwiftUIWebView()
                .border(Color.blue, width: 2)
                // Shows weird black bar on top without this on macOS
                .ignoresSafeArea() 
        }
    }
}
user_161963840
Related