Why does UIWebView not scroll correctly?

Question

I have a fairly simple scene, with a single UIWebView that loads an html document from the bundle. The webView fills the screen below the top layout guide, and uses the recommended constraints. It has two odd behaviors:

It starts with the content scrolled down a bit. You can see this in the first image below. The pink is the color of the UIWebView, and the html itself is white.
There is something goofy about the webView's UIScrollView itself, because (again: see pic) the content is scrolled all the way to the bottom, but the scroller isn't at the top of the webView; it's at the top of the content.

The content does easily scroll into that pink region, and when the content is scrolled all the way up, the scroll bar is at the bottom of the UIWebView. See second image.

I realize that I can programmatically set the contentOffset, but it only works in the webViewDidFinishLoad function and then it causes a visible jump, because the webview draws itself first and then scrolls, so that's no good.

Here is the html (truncated for space):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="help.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h2>Frequently-asked questions</h2>
</body>
</html>

And the CSS:

@charset "UTF-8";
body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 16px;
}

And here is the ViewController:

class HelpViewController: UIViewController, UIWebViewDelegate {

    @IBOutlet weak var webView: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let navController = self.navigationController
        navController?.navigationBarHidden = false
    }

    override func viewWillAppear(animated: Bool) {
        loadURL();
    }

    func loadURL() {
        let htmlName = "support";
        let url = NSBundle.mainBundle().URLForResource(htmlName, withExtension: "html")
        self.webView.delegate = self;
        if let goodURL = url {
            let request = NSURLRequest(URL: goodURL)
            self.webView.loadRequest(request)
        }
    }
}

It seems like the problem must be related to something in IB, but I don't see what. Any bright ideas?

Thanks in advance!

-Dave

Initial View Scrolled to bottom

it's an layout issue of the webview, please show the setting in the Interface Builder — JeanLuc
do you have a webview inside a scrollview? if so, you don't need that, because a webview contains a scrollview it self and you would end up with two scrollview, which I think is not required in your case. — JeanLuc

Dave Hirsch Dave Hirsch · Accepted Answer · 2014-12-26T23:50:51

So, I think I've figured it out, in a way. I have a navigation bar in this scene. I had the webview's top constraint set to the Top Layout Guide, which makes sense, because that's where I want the top of the actual dang webview to be. However, it appears that is not kosher for me for some reason, and so I changed it to be tied to the top of the superview (the main view of the scene).

This works: I can see the pink tint under the translucent navigation bar, but the webview's actual contents are located correctly.

It appears that the UIWebView expects to be sized to the whole view, and if there's a navigation bar, then it shortens its own scrollview to allow for the size of the navigation bar, whether or not that resizing is actually needed/justified. Perhaps there's something else my app is doing that is munging this up, but if not, I don't think this is good behavior for UIWebView.

-Dave

Why does UIWebView not scroll correctly?

1 Answers