Search code examples
htmlioslayoutswiftuiwkwebview

WKWebViews in SwiftUI layout get updated - become blank

My iOS SwiftUI app has some WKWebViews in the layout.

It is possible by means of creating a special View that encloses the WKWebView as it is known from other SO questions.

Suitable methods are included:

func webView(_ webView: WKWebView,
    didFinish navigation: WKNavigation!)
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)
func makeUIView(context: Context) -> WKWebView
func updateUIView(_ uiView: WKWebView, context: Context)

The main screen has two WKWebViews, one on the left and the other on the right, in two different views that contain the WebViews (this is how I named the WKWebView enclosing View).

So there are two views in a HStack, and they split the screen.

Each of these views has its own layout but it also has a WebView inside.

The left WebView correctly displays an HTML page created by the app.

The right WebView has an editable text area inside.

The following was tested on the iOS simulator, I do not know if it is the same on real devices, but it is very likely.

When I edit some text, I think that the layout is calculated again and I experience that the two WebViews become blank,

and the updateUIView method is called.

The WebView in the body are referenced with a variable that is assigned outside of the body, so

it is like

LeftView

var body: some View
{

leftWebView

}

and not

var body: some View
{

LeftWebView()

}

so it should be not recreated.

Indeed I think it is not recreated, yet it becomes blank.

Solution

  • I found a possible solution or workaround.

    I do not provide the code because I do not know if it is good, so I just summarize it up here.

    It works for me.

    Instead of embedding the WKWebView in the SwiftUI View

    I embedded a ViewController in the SwiftUI View. Just a few differences in the implementation on the SwiftUI View side.

    Examples are easily found.

    This ViewController hosts a view that is loaded from a xib file, it is a simple view, I created it in the designer tool, no outlets to create or other hassles.

    Then the WKWebView is added to the UIView programmatically.

    So, it happens that, this way the WKWebViews in my application are not bothered by the SwiftUI layout hierarchy cycles and are correctly displayed.

    They do not become blank when one of them is edited or the layout changes.