WKWebView的坑之图片显示不完全

最近在做iPad Pro适配时遇到了WKWebView图片显示不完全的坑

在显示网页中的大尺寸图片时，图片显示不完整，有些是下方不显示，有些是下方和右侧都不显示。流程如下

第一类情况

在卡片出现时，显示了WKWebView上部内容。

点击卡片下方展开按钮或者上划手势，展开卡片，可以看到更多网页内容，但是下方图片无内容成白色。滑动图片后网页内容图片刷新，显示正常，如下

第二类情况

如果WKWebView的初始状态为不可见时，如下

点击展开卡片，显示的图片只有左上角一小条，其他内容缺失，如下

同样滑动后页面会刷新，图片显示恢复正常。

原因分析

WKWebView相比UIWebView提高了页面渲染载入速度，其中也包括只对展示给用户可见的内容进行渲染，这样可以大大提高载入速度。如我遇到的图片问题，WKWebView会把图片分割成多块，如下图A-F六块区域。

在第一类情况，由于A/B/C块都是用户可见区域，所以WKWebView对这三块区域进行了渲染，而D/E/F块都没有渲染。所以展开卡片时，他也呈现空白状态，图片缺失。
第二类情况则是所有区域都不在用户可视范围内，所以他仅对A块渲染，展开后B/C/D/E/F都为空白，图片缺失。这个可以在XCode的Debug View Hierarchy中得到验证，完整渲染的有六个区域，第一种情况三个区域，第二种状况只有一种区域。

解决办法

填坑办法就是强制让WKWebView重新渲染一次，代码如下

[_webView setNeedsLayout];

我是在展开卡片时增加了WKWebView强制重新渲染的代码实现。而对于网上提到比较多的，在UITableView中添加WKWebView图片载入不全的情况可以在- (void)scrollViewDidScroll:(UIScrollView *)scrollView中增加强制重新渲染的代码来解决。声称这个坑在iOS11中得到了修复，但是我的11.3的iPad Pro还是遇到了这个问题😂，可能是我们的WKWebView操作没有触发重新渲染吧。

———————————————– 编辑于20180821 ——————————————————-
最近出现了在iOS 8.2系统下图片显示过大，超出屏幕的问题。可以通过addUserScript解决，如下

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
[[_webView configuration].userContentController addUserScript:wkUScript];

Reference List

WKWebView not rendering correctly in iOS 10
使用WKWebView 适应屏幕尺寸