10

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

VGruenhagen
  • 1,487
  • 15
  • 28

3 Answers3

12

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>
Design Navigator
  • 144
  • 3
  • 1
    You know what "Design Navigator"? I could kiss you. This works like a charm. – rickchristie Oct 28 '14 at 07:08
  • 2
    Wrong message board ;-) – Design Navigator Oct 29 '14 at 20:21
  • What you have given us is a Kludge or in other words a big hack! Messy but does fix the issue. That's why I'm upvoting and accepting as the answer in case it help others. – VGruenhagen Nov 20 '14 at 00:47
  • Hi all, i happened a stranger problem like this about input running on IOS8, see [http://stackoverflow.com/questions/27053549/cursor-exceeds-the-border-when-tap-or-select-all-content-in-input-fields-on-ios], hope you can answer the question, thank you in advance! – Dean Nov 21 '14 at 03:26
  • YYYEEESSS. and btw, it's not just safari, its iOS in general. Same issue happens on other browsers. Luckily, this fixes it. – dipole_moment Aug 28 '15 at 16:40
  • We are running into this problem on IOS 9.XX. Does anyone know what the root cause of this problem is and why no other browser is experiencing this issue on IOS or the fact that it works fine in Safari on OSX? – Zack Herbert Sep 07 '16 at 13:09
  • It fixes the slow typing but doesn't fix the focus delay. At least on desktop Safari 11.0.3. – Finesse Mar 28 '18 at 04:19
  • 1
    Wow. Still in issue in 2019 and you have saved my life. – Daniel X Moore May 12 '19 at 17:56
3

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

Aaron Brager
  • 65,323
  • 19
  • 161
  • 287
  • Ya I also noticed it works on Chrome and some other third-party browsers. Forcing users to download another browser is not really an optimal solution unfortunately. – VGruenhagen Oct 06 '14 at 23:10
  • I had the same problem, and upgraded my device to 8.1.1 to see if it was fixed. It was not. Perhaps a slight improvement, but incredibly janky and slow still on input-heavy pages. Not sure what to do yet, but I'd advise others with similar problems not to pin too much hope on 8.1.1. – Bryce Johnson Nov 12 '14 at 20:21
  • 8.1.1 Doesn't fix the issue. For the time being if users are using Safari and have 8+, I take them to a page that informs them that Safari is currently not supported for IOS 8. And if they want to use the service they must install Google Chrome (or use a desktop computer). Seems like the best I can do until Apple pushes out a fix. – VGruenhagen Nov 18 '14 at 20:39
  • Still getting this problem a year later, really don't want to wrap all inputs in a
    to fix.
     – William Walseth Nov 10 '15 at 15:18
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 />');
    }
}
Roman
  • 3,799
  • 4
  • 30
  • 41