WKWebView not rendering correctly in iOS 10

Question

I have WKWebView inside the UITableViewCell. The web view load request and then after finished loading, I'll resize the web view height to be equal to its content height, then adjust table view cell height to fit accordingly.

What happened was the web view only displays the area that fit the screen size. When I scroll down, everything is white. But I see that the web view rendered with correct height, tap and hold on the white area on the web view still see selection. Zooming with pinch makes the web view area that displaying on the screen visible, but other areas sometimes become white.

It works fine on iOS 8 and 9. I have created a sample project to demonstrate this behaviour here: https://github.com/pawin/strange-wkwebview

Open Radar: https://openradar.appspot.com/radar?id=4944718286815232

Update: This issue is resolved in iOS11

Answer 1

You need to force the WKWebView to layout while your UITableView scrolls.

// in the UITableViewDelegate
func scrollViewDidScroll(scrollView: UIScrollView) {
    if let tableView = scrollView as? UITableView {
        for cell in tableView.visibleCells {
            guard let cell = cell as? MyCustomCellClass else { continue }
            cell.webView?.setNeedsLayout()
        }
    }
}

Answer 2

    func reloadWKWebViewIfNeeded() {
    for cell in self.tableView.visibleCells {
        guard let webviewCell = cell as? WebviewCell else { continue }

        // guard cell height > screen height

        webviewCell.webview.reload()
    }
}

override func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    guard !decelerate else { return }

    self.reloadWKWebViewIfNeeded()
}

override func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    self.reloadWKWebViewIfNeeded()
}

Not the best solution though, but at least user can see the rest of the content

Answer 3

I have the same problem - add a WKWebView to a UITableViewCell, and I solved this problem by these steps:

scrollViewDidScroll

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.xxtextView becomeFirstResponder];
    [self.xxtextView resignFirstResponder];
}

These codes may cause increased cpu performance overhead, you can fix it by some way such us use a temp variable as threshold value.

I don't think this is a perfect solve method, but it works for me.

---

Eventually I realized that textview becomeFirstResponder just led the webview layout again, so you can just fix it like this:

CGFloat tempOffset = 0;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (!tempOffset || ABS(scrollView.contentOffset.y - tempOffset) > ScreenHeight/2)
    {
        [self.wkWebView setNeedsLayout];
        tempOffset = scrollView.contentOffset.y;
    }
}

Answer 4

In objective-C this is how I solve the problem.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    NSArray * visibleCell = [self.tableView visibleCells];

    for (CustomUITableViewCell * cell in visibleCell) {
        if ([cell isKindOfClass:[CustomUITableViewCell class]]) {
            [cell.wkWebView setNeedsLayout];
        }
    }
}

That code will collect all visible cell and do the setNeedsLayout in fast enumeration during user scroll.

Answer 5

Im also have uitableview with cell with wkWebView. And i stack with same problem. But timely you can fix this with this code. By performance do not worry. I tested this solution on iphone 5s and it was taken 10-15% CPU only when you scrolling uitableView with visible web cell.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
   //TODO: Remove this fix when WKWebView will fixed
   if let cell = tableView.cellForRow(at: IndexPath(row: 1, section: 0)) as? WKWebViewCell {
      // Here we take our cell
      cell.wkWebView?.setNeedsLayout() 
      // here is "magic" (where wkWebView it is WKWebView, which was 
      // previously added on cell)
   }
}