iOS 5 Safari Bugs: Trio of Test Cases


I've run into two bugs and a third bit of tricky behavior with Mobile Safari on iOS 5. I thought I'd share what I found in order to hopefully save somebody from pulling out their hair.

1. Bug With CSS Translated Form Fields

In this bug, giving keyboard focus (such as via JavaScript) to a form input that is translated off screen with CSS transforms causes the page content to shift position and the text input caret to render in the wrong place.

Check out my test case.

2. Inconvenient Behavior with Fixed Positioned Header Bars and Form Fields

Many of you may begin using iOS 5's new CSS position: fixed; support to add fixed nav or header bars to the top of the screen. If you have any form fields in your content that are given fixed positioning (such as a search field in your header bar), you must anticipate that your fixed positioned content will come unglued when those form fields are given keyboard focus.

See my example, including a suggested design fix.

3. Fixed Position Content May Become Un-Clickable or Invisible

This is a particularly pernicious bug. If you add content to your mobile web site / app via AJAX, or reveal hidden content to the user, and this new content scrolls off screen -- if a user reloads your site while scrolled to the bottom of this content, it may make your fixed positioned content (such as a top nav bar) either disappear or become temporarily un-clickable upon reload.

Read my test case for more information, and for a bug fix.

That's it for now. I hope this is helpful to you.