Why does Safari Mobile have trouble handling many input fields on iOS 8

Question

iOS 8.0/8.0.1/8.0.2 has this problem.

I have a page with 70 simple text inputs:

<input class=""  type="text">

On iOS 7 the page has no problems. But on iOS 8, selecting and typing in a field causes the iPad to become slow and laggy.

You can see an example of the problem in this jsFiddle

Does anyone know a fix to this problem???

Answer 1

Seems the issue is related to the number of text inputs which are part of the document or a form.

I "fixed" the issue by placing <form> tags around small groups of text inputs.

<form>
  <input type="text">
  <input type="text">
  <input type="text">
</form>

<form>
  <input type="text">
  <input type="text">
  <input type="text">
</form>

etc.

In some cases I had large tables with individual text fields in the <td> elements. You can't include <tr> or <td> elements in a form but rather must include the whole <table> or the content of individual <td> elements. In those cases I had to place a <form> element around each text input.

<table>
  <tr>
    <td>
      <form>
        <input type="text">
      </form>
    </td>
    <td>
      <form>
        <input type="text">
      </form>
    </td>
  </tr>
  etc....
</table>

Answer 2

Update: This appears to be resolved in the iOS 8.1.1 beta. It appears not to be fixed, based on comments. :(

---

It's also in the 8.1 betas. You should file a radar.

Some stuff causes the entire webpage to reload or Safari to hang. For example, visit http://getemoji.com/ and start typing in the search box. You can't do it on an iOS 8.x device without the page reloading.

Notably, Chrome and Mercury work fine, so you could suggest that your users switch to third-party browsers based on UIWebView. (I didn't test out WKWebView.)

Answer 3

I've been struggling with this for many hours until I found the solution on this page. Thanks! This is my implementation of solution suggested by Design Navigator:

$(document).ready(function(){    
    var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && !navigator.userAgent.match('CriOS');
    if (isSafari){
      $('#container input[type="text"]').wrap('<form />');
    }
}