UIWebView and CSS fixed position

Question

I have a UIWebView that uses a fixed position header.

When the ViewController that contains the UIWebView is the initial view, there is no problem with the fixed position divs.

When I display that same ViewController through a Modal segue, that's when the problem occurs.

The first time I scroll on the page, the divs move and scroll with the page, but once I let go of scrolling for the first time, the div returns to its fixed position and the error never happens again.

Any ideas? I've seen iScroll, it doesn't quite work like I want the page too, and I think there's an easier way, since I only get the problem on the initial load of the UIWebView...

Answer 1

Unfortunately. position: fixed isn't reliable on iOS yet. This means you'll need to make compromises somewhere.

iScroll may work, but it's a hack at best. Depending on the device it may not scroll fast enough to give that "fixed" look you want.

You haven't given us much detail about what is in this header, but here are a few other possibilities:

a. Place anything you need fixed to the top of the screen in a UIView at the top of your ViewController, with the UIWebView below it.

b. Change your storyboard flow to eliminate the need for a modal segue.

c. Don't use storyboards, thus eliminating the problem with the segue.

d. Redesign your HTML so the need for a fixed header is removed.

Tell us more about what's in this fixed header and maybe we can come up with other ideas.

Answer 2

position: fixed doesn't yet work well on iOS.

iScroll is a safer bet.

Answer 3

I used a CSS workaround, positioning the header as absolute in the top left corner, and giving the main <div> an overflow-y: scroll;, and keeping the body { height: 100%; }.

This resulted in kind of a knock-off iScroll!

EDIT

Also, you can insert this:

-webkit-overflow-scrolling: touch;

Into the main <div> css for a more native feel.