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

Question

UPDATE: The issue seems to stem from having many select elements on a page. How random is that?

So here\'s the issue. On iOS 7 Safari, when tapping

Answer 1

Struggled with this issue as well within an ios fullscreen which was inserting /removing pages containing a single input element. Was experiencing delays up to 30 seconds with only a single visible text input element on the page (and within the entire DOM). Other dynamically inserted pages with single or multiple text inputs in the same webapp were not experiencing the input delay. Like others have mentioned, after the initial delay, the input field would behave normally on subsequent focus events (even if the dynamic page containing the input element was removed from the DOM, then dynamically re-rendered/inserted back into the DOM).

On a hunch based on the above behaviour, tried the following on page load:

$("#problem-input").focus(); $("#problem-input").blur();

While the above executes immediately with no delay, the end result is no subsequent delays when the input gets focus via user interaction. Can't explain the reason behind this working, but it appears to work consistently for my app while other suggested fixes have failed.

Answer 2

There seems to be a problem with how IOS handles the touch-event for inputs and textareas. The delay gets larger when the DOM gets larger. There is however not a problem with the focus event!

To work around this problem you can override the touchend event and set focus to the input/textarea.

document.addEventListener("touchend", function (e) {  
     if (e.target.nodeName.toString().toUpperCase() == 'INPUT' || e.target.nodeName.toString().toUpperCase() == 'TEXTAREA') {  
         e.preventDefault(); 
         e.target.focus(); 
     } 
});

This will however create a new problem. It will let you scroll the page while touching the input/textarea, but when you let go, the site will scroll back to the original position.

To fix this, you just need to check if any scrolling has occured, and surround the preventDefault and target.focus with an if statement.

To set the original position, you can use the touchstart event.

document.addEventListener("touchstart", function (e) {
    ... //store the scrollTop or offsetHeight position and compare it in touchend event.
}

EDIT Me and a colleague have improved it a little bit, and it works like a charm.

var scroll = 0; 
document.addEventListener("touchstart", function (e) { 
    scroll = document.body.scrollTop; 
 });   

document.addEventListener("touchend", function (e) { 
    if (scroll == document.body.scrollTop) { 
        var node = e.target.nodeName.toString().toUpperCase(); 
        if (node == 'INPUT' || node == 'TEXTAREA' || node == 'SELECT') { 
            e.preventDefault(); 
            e.target.focus(); 
            if(node != 'SELECT') {
                var textLength = e.target.value.length; 
                e.target.setSelectionRange(textLength, textLength);
            }
        } 
    } 
}); 

Answer 3

I have the same freezeing problem.

I am not sure we're in the same situation.

here is my demo:http://tedzhou.github.io/demo/ios7sucks.html

In my page, i use a <p> element with onclick attribute as a button. When user click on the button, page change to a textarea. Then a click on it will freezes the browser.

The time freezing spent relevent to the numbers of the dom elements. In my pages, there are 10000 elements, which make it freeze by 10+ seconds.

We can solve the problem by switching the <p> element to the real <button>, or reducing the nums of dom elements.

ps: sorry for my poor english. LOL

Answer 4

Met the same problem in quite complex application having many inputs.

Attached debugger to Safari iOS7 via USB and logged UI events. I see "touchend" event coming as soon as I am clicking on textarea (or any input) and in 10-20 seconds after that I see "click" being dispatched.

Clearly it is a bug in Safary as on other devices like Android or iOS6 there is no problem with the very same application.

Answer 5

The main issue for me was with hidden fields. Made the form hang for 10-15 seconds.

I managed to get around by positioning the hidden form fields off the screen.

---

To hide:

position: absolute;
left: -9999px;

To show:

position: relative;
left: 0;

---

Answer 6

My answer might be slightly off the main topic, but I did arrive here after some searching as the scenario "feels" similar.

Issue:

My issue felt like a lockup in iOS, but not quite, since other elements on the page were still interactive. I had an <input type="search" /> element, that would not focus when I clicked into the field. But it would eventually catch focus after about 4-5 taps on the screen.

Additional Info:

My project is a hybrid app: WebView inside of an iOS app. The site is built with Twitter Bootstrap.

Solution:

I happened to also have the autofocus attribute set on the element. I tried removing that and it worked... no more consecutive taps to get the field to focus.