Bug with iOS5 (Safari), "position: fixed" div and high forms

Question

All,

I am working on a web application that includes a very "tall" form. (High, this means that it is several hundred percent higher than a normal screen).

Design requires a “footer” tied to the bottom of the screen, which is ALWAYS displayed, 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 “below” it.

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

This works great in all tested browsers, including Safari on iOS5.

Except for ONE error ...

If the user is at the top of the form and focuses on one of the text fields - as expected, iOS displays the keyboard.

Each time the user clicks the Next button, iOS “inserts” it into the next field.

As it progresses in form by repeatedly clicking Next , iOS automatically “scrolls” the form, so its position in the form remains in sight.

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

If the user rejects the keyboard, the div is restored to the “right” place, so this is not a fatal error. But the fact that the footer moves in general is a glaring problem.

Is this a bug or a flaw with the implementation of iOS position:fixed ? Or, am I doing something wrong?

Thank you very much in advance!

[UPDATE]

Remy Sharp (aptly named) just wrote an excellent and detailed report on various errors and problems with position:fixed on iOS / Safari: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling -on-ios / . This is a must read if you are 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 that iOS5 supports it, but I had a problem with it in the past. If your footer is a kind of control panel, then I would suggest using a sticky CSS footer, after which all pages / content could be loaded into a div above that.

Answer 2

Do you use jQuery? If so, I suspect something like this work:

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

Scrolling through the 1px page after focusing a new form element, it should reset the attribute of the lower element of the fixed element.

Answer 3

Here is the fix, without the footer jumping on you.

• first you end the title and body / section in the div. Do a scrolling div.
• than you set the absolute footer and position relative to everything else.
• add fixed heights.

See how it works, http://yinnetteolivo.com/footerbottom.html

Your welcome :)

Answer 4

None of the other answers I found for this error worked for me. I was able to fix this simply by scrolling back 34 pixels, the number of mobile safaris scrolls down. with jquery:

 $('.search-form').on('focusin', function(){ $(window).scrollTop($(window).scrollTop() + 34); }); 

This will obviously take effect in all browsers, but will prevent its violation in iOS.