最近在做iPad Pro适配时遇到了WKWebView图片显示不完全的坑
在显示网页中的大尺寸图片时,图片显示不完整,有些是下方不显示,有些是下方和右侧都不显示。流程如下
第一类情况
1. APP下方题目卡片初始状态在卡片出现时,显示了
WKWebView
上部内容。2. APP下方题目卡片展开状态
点击卡片下方展开按钮或者上划手势,展开卡片,可以看到更多网页内容,但是下方图片无内容成白色。滑动图片后网页内容图片刷新,显示正常,如下
3. APP下方题目卡片拖动后显示
第二类情况
如果WKWebView
的初始状态为不可见时,如下
点击展开卡片,显示的图片只有左上角一小条,其他内容缺失,如下
5. APP下方题目卡片展开状态
同样滑动后页面会刷新,图片显示恢复正常。
6. APP下方题目卡片拖动后显示
原因分析
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 适应屏幕尺寸
网友评论