最近在做iPad Pro適配時遇到了WKWebView圖片顯示不完全的坑
在顯示網(wǎng)頁中的大尺寸圖片時屠凶，圖片顯示不完整膝宁，有些是下方不顯示憎茂，有些是下方和右側都不顯示挚躯。流程如下
第一類情況
在卡片出現(xiàn)時，顯示了
WKWebView上部內(nèi)容形葬。
點擊卡片下方展開按鈕或者上劃手勢合呐，展開卡片，可以看到更多網(wǎng)頁內(nèi)容笙以，但是下方圖片無內(nèi)容成白色淌实。滑動圖片后網(wǎng)頁內(nèi)容圖片刷新猖腕，顯示正常拆祈，如下
第二類情況
如果WKWebView的初始狀態(tài)為不可見時，如下
點擊展開卡片倘感，顯示的圖片只有左上角一小條放坏，其他內(nèi)容缺失，如下
同樣滑動后頁面會刷新老玛，圖片顯示恢復正常淤年。
原因分析
WKWebView相比UIWebView提高了頁面渲染載入速度，其中也包括只對展示給用戶可見的內(nèi)容進行渲染蜡豹，這樣可以大大提高載入速度互亮。如我遇到的圖片問題，WKWebView會把圖片分割成多塊余素，如下圖A-F六塊區(qū)域。
在第一類情況炊昆，由于A/B/C塊都是用戶可見區(qū)域桨吊，所以
WKWebView對這三塊區(qū)域進行了渲染，而D/E/F塊都沒有渲染凤巨。所以展開卡片時视乐，他也呈現(xiàn)空白狀態(tài)，圖片缺失敢茁。第二類情況則是所有區(qū)域都不在用戶可視范圍內(nèi)佑淀，所以他僅對A塊渲染，展開后B/C/D/E/F都為空白彰檬，圖片缺失伸刃。這個可以在
XCode的Debug View Hierarchy中得到驗證谎砾，完整渲染的有六個區(qū)域，第一種情況三個區(qū)域捧颅，第二種狀況只有一種區(qū)域景图。
解決辦法
填坑辦法就是強制讓WKWebView重新渲染一次，代碼如下
[_webView setNeedsLayout];
我是在展開卡片時增加了WKWebView強制重新渲染的代碼實現(xiàn)碉哑。而對于網(wǎng)上提到比較多的挚币，在UITableView中添加WKWebView圖片載入不全的情況可以在- (void)scrollViewDidScroll:(UIScrollView *)scrollView中增加強制重新渲染的代碼來解決。聲稱這個坑在iOS11中得到了修復扣典，但是我的11.3的iPad Pro還是遇到了這個問題??妆毕，可能是我們的WKWebView操作沒有觸發(fā)重新渲染吧。
----------------------------------------------- 編輯于20180821 -------------------------------------------------------
最近出現(xiàn)了在iOS 8.2系統(tǒng)下圖片顯示過大贮尖，超出屏幕的問題笛粘。可以通過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 適應屏幕尺寸
