CODEWITHSUNDEEP
iosobjective-cuiwebviewwkwebview
benkraus
benkraus

Reputation: 707

WKWebView dynamic sizing issues

In an app I am currently working on, UIWebView is used to display files such as PowerPoints and such. There is a drawer to the right of the web view that can be opened and closed via a UIPanGestureRecognizer. As you resize, then open or close, a black artifact will appear on the right side of the web view, exactly as seen on this question: Black bar appearing in UIWebview when device orientation changes.

Between that issue, and the issue in iOS 8 with PDFs rendering with a black background, I decided to try out WKWebView. That doesn't have either issue, however when the web view's width changes dynamically (the right constraint is bound to the pan gesture) the content in the web view is very slow. The web view either doesn't resize, or is very choppy/blocky as it does. This issue isn't present when using UIWebView. Does anyone have either any pointers to fix the issue with UIWebView and that black artifact, or why WKWebView is performing so badly?

enter image description here

Upvotes: 1

Views: 1179

Answers (1)

Nick
Nick

Reputation: 2369

re: the WKWebView

My guess is that the webview is attempting to re-render its contents several times as the frame is adjusted. This could cause the choppiness, and there may not be much you can do about that. (not sure)

One way you could 'cheat' is by taking a snapshot of the webview before adjusting its frame, and laying it over top of the webview.

set the webview's hidden property to YES in hopes of killing the re-rendering as the frame is adjusted.

hook up the snapshot to the pan gesture recognizer, and when the gesture ends, give the webview its final frame and set hidden back to NO

at this point, you can remove the snapshot (maybe with an alpha animation) and the webview should only ever have to re-render its content once.

there will probably be a disparity between the snapshot's appearance and the webview's final appearance, but it should be workable.

Upvotes: 1

Related Questions