WKWebView not showing content "below the screen"

Question

I have to integrate WKWebView inside UITableView (please don't question that).

I made sure the WKWebView scroll is disabled, this way I avoid having a scrollable view within a scrollable view (UITableView).

However, when the HTML content inside the WKWebview is large, let's say twice the screen, I find that the content below the screen is not shown to the user, i.e. when the user scrolls the table view there is only white\empty screen where the WKWebView is...

I update the height of the WebViewTableViewCell according to:

public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    let height = webView.scrollView.contentSize.height
    ...
    ...
    delegate.updateWebViewCellHeight(height: self.cellHeight)
}

I guess it's probably the effect of some optimization on WKWebView which allow it to render DOM's only when they are shown on screen.

My question is, what can I do in order to make sure all the content inside the WKWebView is shown to the user when she scrolls the table view?

P.S. UIWebView renders all the content just fine, it seems to be happening only in WKWebView

See image below:

Answer 1

This is really Apple optimization - to render only visible part of web-view. There are several similar questions about this issue:

WKWebView screenshot not completely rendering full page height

How to capture a full page screenshot of WKWebview?

Try to call [self.webView setNeedsDisplay] in table view delegate's scrollViewDidScroll: method.

Answer 2

You can call setNeedsLayout on the WKWebView, (Swift):

Note this is the scrollView for the UITableView.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // use IndexPath for row/section with your WKWebView
    if let cell = tableView.cellForRow(at: IndexPath(row: 1, section: 0)) as? WKWebViewCell { // Here we take our cell
        cell.wkWebView?.setNeedsLayout()
    }
}

See WKWebView not rendering correctly in iOS 10