title: A bug with iOS5 (Safari), a "position:fixed' div, and tall forms
body: <p>All,</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>To implement this, I've created the footer as a div with <code>position:fixed</code>, and <code>bottom:0</code>.</p>
  
  <p>This works perfectly on all the browsers I've tested, including Safari on iOS5.</p>
  
  <p>Except there's <strong>ONE</strong> bug...</p>
  
  <p>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.</p>
  
  <p>Each time the user the clicks <strong>Next</strong> button, iOS "tabs" her to the next field.</p>
  
  <p>As she progresses down the form by repeatedly clicking <strong>Next</strong>, iOS automatically "scrolls up" the form, so her position on the form remains in view.</p>
  
  <p>However, iOS doesn't seem to update the position of the <code>position:fixed</code> footer div - it incorrectly scrolls up along with the rest of the form.</p>
  
  <p>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.</p>
  
  <p>Is this a bug or shortcoming with iOS's implemention of <code>position:fixed</code>? Or, is there something I'm doing wrong?</p>
  
  <p>Many thanks in advance!</p>
  
  <p><strong>[UPDATE]</strong></p>
  
  <p>Remy Sharp (aptly named) has just written an excellent and detailed post about a variety of bugs and issues with <code>position:fixed</code> on iOS/Safari: <a href="http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/" rel="nofollow">http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/</a>. It's a must-read if you're thinking about using <code>position:fixed</code> on a site intended for iOS users...</p>