A bug with iOS5 (Safari), a "position:fixed' div, and tall forms

Question

All,

I'm working on a web application that includes a very "tall" form. (By tall, it mean that it's several hundred percent taller than a typical screen).

The design calls for a "footer" anchored to the bottom of the screen that's ALWAYS visible, regardless of the user's position in the form.

In other words, the footer should be visible regardless of whether the user is near the top, middle, or bottom of the form, and the form should scroll "underneath" it.

To implement this, I've created the footer as a div with position:fixed, and bottom:0.

This works perfectly on all the browsers I've tested, including Safari on iOS5.

Except there's ONE bug...

If the user is near the top of the form, and gives focus to one of the text fields - as expected, iOS shows the keyboard.

Each time the user the clicks Next button, iOS "tabs" her to the next field.

As she progresses down the form by repeatedly clicking Next, iOS automatically "scrolls up" the form, so her position on the form remains in view.

However, iOS doesn't seem to update the position of the position:fixed footer div - it incorrectly scrolls up along with the rest of the form.

If the user dismisses the keyboard, the div is restored to it's "proper" place, so this isn't an unrecoverable error. But, the fact that the footer moves at all is a glaring problem.

Is this a bug or shortcoming with iOS's implemention of position:fixed? Or, is there something I'm doing wrong?

Many thanks in advance!

[UPDATE]

Remy Sharp (aptly named) has just written an excellent and detailed post about a variety of bugs and issues with position:fixed on iOS/Safari: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/. It's a must-read if you're thinking about using position:fixed on a site intended for iOS users...

Answer 1

I know that position:fixed was not originally supported in early versions of iOS, I know iOS5 does support it but I have had issue with it in the past. If your footer is some sort of control bar then I would suggest using a CSS sticky footer then all pages/content could be loaded into a div above this.

Answer 2

Are you using jQuery? If so, I suspect something like this work work:

$(":input").focus( function() {
  $(window).scrollTop( $(window).scrollTop() + 1 );
});

By scrolling the page 1px after focusing a new form element it should reset the fixed element's bottom attribute.

Answer 3

Here is the fix, without having the footer jump around on you.

1. first you wrap the header and body/section in a div. Make that div scrollable.
2. than you position absolute the footer and position relative everything else.
3. add fixed heights.

See it working here, http://yinnetteolivo.com/footerbottom.html

Your welcome :)