Why Does Safari Mobile Have Trouble Handling Many Input Fields on iOS 8

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

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>

Typing inside a text input is extremely slow on iPad mini with iOS8 Mobile Safari and Safari 8

Same issue as this one: Why does Safari Mobile have trouble handling many input fields on iOS 8

A workaround is to wrap each input element in a form element like this:

<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="text" autocorrect="off" /></form>
<form><input class=""  type="email" autocorrect="off" /></form>

Input field iOS Safari bug — Can't type in any text

input { -webkit-user-select:text;}

this will solve the issue.

iOS8 and Safari no longer working with Bluetooth scanner

Had the issue with a Socket CHS 7Mi Scanner till version 8.2 of iOS.

With the update to 8.3, this seems to be solved.

iOS 7 Safari: OS locks up for 4 seconds when clicking/focusing on a HTML input

(There are some somewhat-effective solutions, see near the end of the list)

At my company we are also suffering from this. We filed an issue with Apple but have heard mum.

Here are some interesting jsfiddles to help illustrate some of the issues, it definitely seems to revolve around the number of hidden fields, and textareas do not seem to be affected.

From debugging efforts, my guess is that there is some functionality trying to detect if an input is a credit card or phone number or some special kind which seems to cause the locking behavior. This is just one hypothesis though..

Summary:

On a page with a form containing named input elements inside containers that are marked "display: none", the first press on an input in that form has a very noticeable delay (20sec-2min) between the keyboard coming up and the input being focused. This prevents users from using our web app due to the enormous time spent with the ui frozen waiting for the keyboard to respond. We have debugged it in various scenarios to try and discern what is going on, and it appears to be from a change in how iOS7 parses the DOM versus how it did on iOS6, which has none of these issues.

From debugging within Safari's Inspector with the iPad connected, we found that iOS7 provides much more information about the (program)'s activities, to the point that we found that _CollectFormMetaData is the parent of the problem. Searching for meta data causes massive churn that increases more than linearly along with the number of hidden containers containing inputs. We found that _isVisible and _isRenderedFormElement are called far more than they reasonably should be. Additionally, if it helps, we found some detection functions relating to credit cards and address books were large time consumers.

Here are some jsFiddles for illustration. Please view them in Safari on an iPad running iOS6 and then on an iPad running iOS7:

http://jsfiddle.net/gUDvL/20/ - Runs fine on both

http://jsfiddle.net/gUDvL/21/ - Just noticeable delay on iOS 7

http://jsfiddle.net/gUDvL/22/ - More noticeable delay on iOS 7

http://jsfiddle.net/gUDvL/29/ - VERY noticeable delay on iOS 7

http://jsfiddle.net/gUDvL/30/ - Same as 29 but with none hidden - no delay on iOS 7

http://jsfiddle.net/gUDvL/38/ - Same as 29 but further exacerbated

http://jsfiddle.net/gUDvL/39/ - 99 hidden inputs, one visible, one separately visible

http://jsfiddle.net/gUDvL/40/ - 99 hidden textareas, one visible, one separately visible

http://jsfiddle.net/gUDvL/41/ - 99 hidden inputs, one visible, one separately visible, all
with the autocomplete="off" attribute

http://jsfiddle.net/gUDvL/42/ - 99 hidden inputs, one visible, one separately visible. Hidden by position absolute and left instead of display.

http://jsfiddle.net/gUDvL/63/ - Same as gUDvL/43/ but with autocomplete, autocorrect, autocapitalize, and spellcheck off

http://jsfiddle.net/gUDvL/65/ - Same as gUDvL/63/ but with cleaned up indentation (seems slower on iPad)

http://jsfiddle.net/gUDvL/66/ - Same as gUDvL/65/ but with display none via css again instead of DOMReady jQuery

http://jsfiddle.net/gUDvL/67/ - Same as gUDvL/66/ but with TedGrav's focus/blur technique

http://jsfiddle.net/gUDvL/68/ - Same as gUDvL/66/ but with css driven text-indent instead of display:block again (noticeable improvement - reduction to 2-3 secs for initial focus)

http://jsfiddle.net/gUDvL/69/ - Same as gUDvL/68/ but with TedGrav's focus/blur re-added

http://jsfiddle.net/gUDvL/71/ - Same as gUDvL/66/ but with js adding a legend tag before each input. (noticeable improvement - reduction to 2-3 secs for initial focus)

<input type="text" autocomplete="off" /> (links to jsfiddle.net must be accompanied by code..)

(We should note that having the iPad connected to a Mac with Safari's debugger engaged dramatically emphasizes the delays.)

Steps to Reproduce:

1. Load any of the above jsfiddles on the iPad
2. Press an input to gain focus
3. Watch screen until you can type

Expected Results:

Expect to be able to type as soon as the keyboard pops up

Actual Results:

Watch the keyboard pop up and the screen freeze, unable to scroll or interact with Safari for a duration. After the duration, focus is given as expected. From then on no further freezes are experienced when focusing on inputs.

tl;dr technique summary

So overall there are a couple proposed fixes from various answers:

• Don't hide the divs with display: none - use something like text-indent
• Short circuit Apple's metadata scanning logic - many form tags or legend tags seem to do the trick
• Auto focus/blur - Did not work for me but two people reported it did

Related threads at Apple:

https://discussions.apple.com/thread/5468360

text field not working in safari

Your problem lies in calcstyle.css here:

* { 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.

---

EDIT

Here is a possible solution:

Select everything but your inputs...

*:not(input.field) {    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Turn off iPhone/Safari input element rounding

On iOS 5 and later:

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input { -webkit-border-radius: 0; } property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they'll keep it around.

On legacy versions you had to set -webkit-appearance: none instead:

input {
    -webkit-appearance: none;
}

---

Related Topics