iOS 5 Fixed Positioned Form Field Behavior Observations

Pre-Conditions

Give a text input some fixed positioning, sticking it to the top of the screen. In this demo there are also two other pieces of content with fixed positioning.

Behavior Observations

First, make sure you are scrolled to the top of the page's content. Give the text input keyboard focus. Notice that the text input does not move. However, if you scroll the page while the input has focus, the fixed content behaves as if it were positioned absolutely rather than fixed.

Second, before you give the input focus, try scrolling down the page a bit (or all the way to the bottom), and then while you are scrolled down, give it keyboard focus. You will notice that all of the fixed content on the page is moved down towards the middle of the screen. Again, while the input has keyboard focus, if you try scrolling, all of the content will behave as if it were absolutely positioned. When you blur the text field, the fixed positioned content snaps back into position.

Expected Behavior

This is a bit tricky, because we have to acknowledge a key UI problem with form fields with fixed positioning on iOS. If somebody gives a form fixed positioning and places it more than 50% of the way down the screen, if we do not move the form field upon focus, then the iOS keyboard will come up and completely cover that form field. That wouldn't be great.

Form fields that happen to be placed in a fixed header bar at the top of the screen (99% of the time we are going to be talking about a text input for search being up there) will always be above the keyboard on the screen. So technically speaking, we do not need to move these down into the middle of the screen on focus.

Suggestions

It may only make things worse for the browser engine to try to determine which fields to scroll into view and which not to. That sounds like a real can of worms. Perhaps we can just entrust developers with a CSS property or some other means to tell the browser not to move a particular field into view.

In the meantime, developers and designers would be wise to either avoid fixed positioned form fields like the plague, or they could do what I did in this demo: They could make their fixed top header bars actually extend in height up into the negative Y space, so that when the fixed header bar is moved down by Safari the space above it is still filled in.

(The rest of this text is just to make sure the page scrolls.)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.