Why does Safari Mobile have trouble handling many

问题:

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???

回答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>

回答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.)

回答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 />');
    }
}