Я использую фреймворк iUI для сайта, оптимизированного для отображения на iPhone/iPad для мобильных браузеров Safari. У меня возникла проблема при использовании iUI и темы по умолчанию с формами, которые выходят за пределы высоты окна браузера iPad (высота экрана). Это поведение не проявляется в настольной версии Safari при использовании агента пользователя iPad, и его немного сложно описать, но вот...
У меня есть длинная форма, которая содержит много текстовых полей, как это:
<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="✓" /><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>
(Всего у меня 22 строки текстовых полей с именами/значениями в первой коллекции fieldset, затем еще две коллекции fieldsset разной длины, 0...n строк)
Происходит следующее: при нажатии на поле, которое появляется почти в самом низу экрана iPad без отображения клавиатуры, клавиатура всплывает, как и ожидалось, но окно браузера прокручивается до самого верха страницы. Поскольку клавиатура отображается, это препятствует заполнению поля формы. Это происходит для каждого поля, которое появляется вблизи или за пределами нижней части окна iPad.
Я использую стандартный iUI CSS (iui.css, iui-panel-list.css и стандартный css темы) и включаю iUI javascript вместе с jQuery 1.5.2, jQuery UI и jQuery livequery.
Есть идеи, что может быть причиной этого? Это не просто раздражает, это делает мобильную версию этих форм практически непригодной для использования. Любая помощь будет принята с благодарностью.