HTML form using iUI on iPad has erratic scrolling when typing in text input files

Question

I'm using the iUI framework for a site optimized for display on iPhone/iPad mobile Safari browsers. I'm having a problem when using iUI and the default theme with forms that extend beyond the height of an iPad browser window (screen height). The behavior doesn't show up on the desktop version of Safari when using an iPad user-agent and is a little hard to describe, but here goes...

I have a long form that contains lots of text fields like this:

  <form accept-charset="UTF-8" action="/customers" class="panel" enctype="multipart/form-data" id="new_customer" method="post" target="_self"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="rp8JH0JucnB9dfQ9TaRr2sTp2rt3Q/fKkzWm5VBB70g=" /></div>
    <script>
        $("form").attr("selected", "true"); 
    </script>
    <input id="fromScheduler" name="fromScheduler" type="hidden" value="0" />
<h2>Client Information</h2>
<fieldset>
    <div class="row">
    <label for="customer_firstName">First Name</label>
    <input autocomplete="off" id="customer_firstName" name="customer[firstName]" onBlur="checkDuplicateClient();" size="30" type="text" />
    </div>
    <div class="row">
    <label for="customer_lastName">Last Name</label>
    <input autocomplete="off" id="customer_lastName" name="customer[lastName]" onBlur="checkDuplicateClient();" size="30" type="text" />
    </div>
    <div class="row"> 
    <label for="customer_email">Email #1</label>
        <input autocomplete="off" id="customer_email" name="customer[email]" size="30" type="email" />
    </div>
    <div class="row"> 
    <label for="customer_secondary_email">Email #2</label>
        <input autocomplete="off" id="customer_secondary_email" name="customer[secondary_email]" size="30" type="email" />
    </div>

(All told I have 22 rows of name/value text fields in the first fieldset collection, then two more fieldsset collections of varying length, 0..n rows.)

What happens is that when clicking into the field that appears almost at the very bottom of the iPad screen without the keyboard being displayed, the keyboard pops up as expected, but the browser window scrolls to the very top of the page. Because the keyboard is displayed, this obstructs the form field being filled in. This happens for every field that appears near or past the bottom of the iPad window.

I'm using the standard iUI CSS (iui.css, iui-panel-list.css, and the default theme css) and am including the iUI javascript along with jQuery 1.5.2, jQuery UI and jQuery livequery.

Any ideas on what could be causing this? It's not just annoying, it makes the mobile version of these forms practically unusable. Any help is appreciated.

Answer 1

It appears that iUI calls the setOrientation() function which both adjusts the page styling based on the device orientation as well as (always) scrolling to the top. I don't believe that scrolling to the top of the page is always appropriate, so I've submitted the following patch on the iUI Google group as a suggestion. I'm posting it here too in the event it's helpful to anyone else and for general feedback as to the soundness of my approach.

--- iui.js
+++ iui.js
@@ -677,12 +677,12 @@ function orientChangeHandler()
    switch(orientation)
    {
    case 0:
-       setOrientation(portraitVal);
+       setOrientationAndScroll(portraitVal);
        break;  

    case 90:
    case -90: 
-       setOrientation(landscapeVal);
+       setOrientationAndScroll(landscapeVal);
        break;
    }
 }
@@ -727,6 +727,11 @@ function setOrientation(orient)
        iui.removeClass(document.body, portraitVal);
        iui.removeClass(document.body, landscapeVal);
    }
+}
+
+function setOrientationAndScroll(orient)
+{
+   setOrientation(orient);
    setTimeout(scrollTo, 100, 0, 1);
 }

@@ -844,7 +849,6 @@ function slide1(fromPage, toPage, backwards, axis, cb)
        (backwards ? fromPage : toPage).style.top = "100%";
    else
        toPage.style.left = "100%";
-
    scrollTo(0, 1);
    toPage.setAttribute("selected", "true");
    var percent = 100;