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.
Mobile Safari on iOS 5 (bug does not exist in iOS 4.2). To begin, an input form field is translated to the right (positive pixels, x-axis) outside of an overflow: hidden; parent element. A click listener will set the translation on the form field to zero to bring it back into the viewable area of the parent element.
On click, input field is focused before the form field is translated back into view.
Container's position on screen is changed to where text input used to be (not where it currently is). Text input caret is drawn where text input used to be (not where it currently is). If user types, input and caret will be be realigned and brought into view, however the container's position on screen remains changed. Even after blur, container element remains displaced on screen.
Variation on this bug also exists in desktop Safari 5.1.1.
At minimum, browser should properly track the moving form field, and also restore the container element's former position on input blur. I do understand the intent behind Safari moving form elements into view when they have keyboard focus.
However, this bug is new to iOS5. Please see behavior in iOS4 for ideal result. In fact, in iOS4, the translation could even be CSS transitioned without problems if it is done after a timeout. This iOS4 behavior with CSS transitions is ideal.
Because iOS does not allow an input to be focused outside of a click event handler, it is not possible to focus the form field after the animation completes -- either by using setTimeout or by listening for webkitTransitionEnd. This fix does however work on the desktop, where there is not this restriction on calling focus.
Perhaps form fields that have been translated should not be scrolled into view? Perhaps focus can be allowed from webkitTransitionEnd?