UIWebView resizes on loadRequest

Question

I have a UIWebView in which the content is scaled to fit. The webview is then resized to fit the content (see below), and works as expected.

The webview also has a swipe gesture attached to load new pages - when executing a loadRequest on the webview for the next page there is a momentary flicker back to the initial width of the webview. I've confirmed that the frame is being changed using an NSTimer and UILabels to display the frame's width.

Here's the code for the re-sizing:

string bookHeightS = bookWebview.EvaluateJavascript ("document.getElementsByTagName('body')[0].scrollHeight");
string bookWidthS = bookWebview.EvaluateJavascript ("document.getElementsByTagName('body')[0].offsetWidth");

nfloat bookHeight = 0;
nfloat.TryParse (bookHeightS, out bookHeight);

nfloat bookWidth = 0;
nfloat.TryParse (bookWidthS, out bookWidth);

nfloat scaling = bookWebview.Frame.Height / bookHeight;

nfloat initialWidth = bookWebview.Frame.Width;
nfloat newWidth = scaling * bookWidth;

CGRect frame = new CGRect (bookWebview.Frame.Location, new CGSize (newWidth, bookWebview.Frame.Height));


if (frame.Width != bookWebview.Frame.Width) {
    bookWebview.Frame = frame;
}

This code is called by the LoadFinished delegate on the webview.

I've tried setting the frame of the webview's scrollview and size of the webview's ContentSize.

What could be causing this flickering?

Answer 1

UIWebView's webViewDidFinishLoad delegate will be called multiple times during loading a webpage, and the possible reason for the flick is you have different size for your webpages and you are trying to fit them by change your UIWebView's frame to the content size (according to your code), why don't you just fixed your UIWebView's frame, and let your webpage fit in your UIWebView? with just "width: 100%" in your webpage's css!

Answer 2

resizing the frame of the webview here is not quite correct. The LoadFinished handler does fire once the load request [uiwebview loadRequest:] has completed successfully, and doesn't mean necessarily that the execution of your HTML content (DOM) has completed. A couple of notes here might help:

1- be sure that you have included a view port tag in your HTML design to maintain fill aspect. (in the head)

<meta name="viewport" content="width=device-width, user-scalable=no">

2- check UIWebView content Mode (scale to fit is the default), Check the supress incremental Rendering as well if needed (depends on your design)

3- practically there is no way to catch when Dom elements has loaded and rendered in HTML. perhaps you can include some loader there, with a timeout(remember to clear it at page unload)

4- If you have some CSS standards for your design perhaps you need to consider 100% width of elements to fill the page.

5- if you are using autolayout just fix the UIWebview's frame instead of handling the WebViewFrame at every swipe.

That's all I can think of, Good luck.