iOS 7 Safari: le système d'exploitation se bloque pendant 4 secondes lorsque vous cliquez / effectuez une mise au point sur une entrée HTML

Question

Mise à JOUR: Le problème semble provenir d'avoir de nombreux sélectionner les éléments sur une page. Comment le hasard est qui?

Alors, voici le problème. Sur iOS 7 Safari, lorsque vous appuyez sur la saisie de texte sur mon site, le clavier s'ouvre puis gèle les OS pendant environ 2 à 5 secondes, puis enfin de passe à l'entrée. Après cela arrive une fois, il n'arrive jamais à nouveau jusqu'à ce que vous actualisez la page. J'ai regardé partout, et oui, iOS 7 Safari est super buggy, mais permet d'essayer et de voir si nous pouvons comprendre cela.

Remarque: Ceci ne se produit pas dans tous les autres navigateur mobile ou d'une précédente iOS Safari. Il arrive à la fois sur l'ios 7 iphone et ios 7 ipad.

Je vais vous énumérer tout ce que mon ami et j'ai essayé jusqu'à présent:

• Retiré la possibilité d'ajouter des gestionnaires d'événements dans jQuery. (Remarque: tous nos gestionnaires d'événements sont affectés par l'entremise de jQuery, sauf pour les décharger et les onpageshow).
• Enlevé le jQuery autocomplete script à partir d'entrées.
• Supprimé tous les JavaScript de ses entrées.
• Supprimé toutes les bibliothèques tierces être ajouté sur la page en rejetant les domaines sur la Mac.
• Changé de revenir aux précédentes versions de jQuery. Le dernier que nous avons effectivement pu utiliser auparavant, rien n'a fonctionné a été 1.7.0.
• Changé de revenir aux précédentes versions de jQuery UI.
• Changé d'entrée de la gestion des événements de déléguer et de vivre, au lieu de on('click')
• Supprimé toutes les classes CSS.
• Supprimé tous les CSS de la page. Remarque: Le temps de réponse pour l'OS c'est allé vers le bas pour 1 à 2 secondes, mais encore arrivé.

Quelqu'un aurait-il des idées?

Merci beaucoup!

Answer 1

(Il y en a quelques-un peu de solutions efficaces, voir près de la fin de la liste)

Dans mon entreprise nous souffrent également de ce. Nous avons déposé un problème avec Apple, mais ont entendu maman.

Voici quelques intéressantes jsfiddles pour aider à illustrer certains des problèmes, il semble tourner autour de l'un certain nombre de champs cachés, et ces zones de texte ne semble pas être affectée.

Du débogage d'efforts, je pense qu'il y a certaines fonctionnalités d'essayer de détecter si une entrée est une carte de crédit ou un numéro de téléphone ou une sorte spéciale qui semble causer le comportement de verrouillage. C'est juste une hypothèse, mais..

Résumé:

Sur une page avec un formulaire contenant nommé d'entrée des éléments à l'intérieur des conteneurs qui sont marqués "display: none", la première pression sur l'entrée dans cette forme a une très notable retard (20sec-2min) entre le clavier à venir et l'entrée concentré. Cela empêche les utilisateurs de l'utilisation de notre application web en raison de l'énorme temps passé avec l'interface utilisateur congelés en attente pour le clavier pour répondre. Nous avons débogué, dans les différents scénarios d'essayer et de discerner ce qui se passe, et il semble être d'un changement dans la façon dont iOS7 analyse les DOM par rapport à comment il l'a fait sur iOS6, qui n'en a aucun de ces problèmes.

À partir de débogage dans Safari Inspecteur de l'iPad connecté, nous avons constaté que iOS7 fournit beaucoup plus d'informations à propos de l' (programme)'s activités, au point que nous avons constaté que _CollectFormMetaData est le parent du problème. Rechercher des méta-données provoque massive de désabonnement qui augmente plus que linéairement avec le nombre de caché récipients contenant des entrées. Nous avons constaté que _isVisible et _isRenderedFormElement sont appelés beaucoup plus que ce qu'ils devraient raisonnablement être. En outre, si cela peut aider, nous avons trouvé quelques fonctions de détection relatifs aux cartes de crédit et les carnets d'adresses ont été grand temps que les consommateurs.

Voici quelques jsFiddles à des fins d'illustration. Veuillez les consulter dans Safari sur un iPad exécutant iOS6 et puis sur un iPad exécutant iOS7:

http://jsfiddle.net/gUDvL/20/ - Fonctionne très bien sur les deux

http://jsfiddle.net/gUDvL/21/ - Tout retard notable sur iOS 7

http://jsfiddle.net/gUDvL/22/ - Plus de retard sur iOS 7

http://jsfiddle.net/gUDvL/29/ - TRÈS en retard sur iOS 7

http://jsfiddle.net/gUDvL/30/ - la Même chose que 29 mais avec aucun cachés, pas de retard sur iOS 7

http://jsfiddle.net/gUDvL/38/ - la Même chose que 29 mais exacerbé

http://jsfiddle.net/gUDvL/39/ - 99 caché entrées, l'une visible, séparément visible

http://jsfiddle.net/gUDvL/40/ - 99 caché textareas, l'un visible, séparément visible

http://jsfiddle.net/gUDvL/41/ - 99 caché entrées, l'une visible, séparément visible, tous les avec l'autocomplete="off" attribut

http://jsfiddle.net/gUDvL/42/ - 99 caché entrées, l'une visible, séparément visible. Caché par la position absolue et de gauche, au lieu de l'affichage.

http://jsfiddle.net/gUDvL/63/ - la Même chose que gUDvL/43/ mais avec la saisie semi-automatique, correction automatique, autocapitalize, et de vérifier l'orthographe d'arrêt

http://jsfiddle.net/gUDvL/65/ - la Même chose que gUDvL/63/ mais avec nettoyés à l'indentation (semble plus lent sur l'iPad)

http://jsfiddle.net/gUDvL/66/ - la Même chose que gUDvL/65/ mais avec aucun affichage via css, plutôt que de DOMReady jQuery

http://jsfiddle.net/gUDvL/67/ - la Même chose que gUDvL/66/ mais avec TedGrav focus/flou technique

http://jsfiddle.net/gUDvL/68/ - la Même chose que gUDvL/66/ mais avec css conduit texte-tiret au lieu de display:block à nouveau (amélioration notable de réduction de 2 à 3 secondes pour le point initial)

http://jsfiddle.net/gUDvL/69/ - la Même chose que gUDvL/68/ mais avec TedGrav focus/flou rajouté

http://jsfiddle.net/gUDvL/71/ - la Même chose que gUDvL/66/ mais avec js ajout d'une légende de la balise avant chaque entrée. (amélioration notable de réduction de 2 à 3 secondes pour le point initial)

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

(Il convient de noter que le fait d'avoir l'iPad est connecté à un Mac avec Safari débogueur engagés de façon spectaculaire met l'accent sur les retards.)

Étapes pour Reproduire:

1. Charge de tout ce qui précède jsfiddles sur l'iPad
2. Appuyez sur entrée pour obtenir le focus
3. Regarder l'écran jusqu'à ce que vous pouvez taper

Résultats Attendus:

S'attendre à être en mesure de taper dès que le clavier apparaît

Les Résultats Réels:

Regarder le clavier pop-up et le blocage de l'écran, impossible de faire défiler ou d'interagir avec Safari pour une durée. Après la durée, l'accent est donné comme prévu. À partir de là, pas plus loin gèle sont expérimentées en se concentrant sur les intrants.

tl;dr technique du résumé

Si dans l'ensemble il y a quelques proposé des correctifs à partir des réponses très diverses:

• Ne cachez pas les divs avec display: none - utiliser quelque chose comme texte-tiret
• Court-circuit d'Apple métadonnées de la numérisation de la logique de beaucoup de balises de formulaire ou la légende des balises semblent faire l'affaire
• Mise au point automatique/flou ne fonctionne pas pour moi, mais deux personnes ont déclaré qu'il n'

Liées fils à la Pomme:

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

Answer 2

Il semble y avoir un problème avec la manière dont IOS gère le tactile de l'événement pour les entrées et les textareas. Le retard devient plus grand lorsque le DOM est importante, plus. Il n'est cependant pas un problème avec l'accent de l'événement!

Pour contourner ce problème, vous pouvez remplacer la touchend de l'événement et de définir le focus à l'entrée/textarea.

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

Ce sera toutefois créer un nouveau problème. Il vous permettra de faire défiler la page tout en touchant l'input/textarea, mais quand vous laissez aller, le site va revenir à la position initiale.

Pour résoudre ce problème, vous avez juste besoin de vérifier si un défilement a eu lieu, et entourent le preventDefault et de la cible.focus avec une instruction if.

Pour définir la position d'origine, vous pouvez utiliser les évènements touchstart événement.

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

MODIFIER un collègue et Moi avons amélioré un peu, et il fonctionne comme un charme.

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

Eu du mal avec cette question à l'intérieur d'un ios en plein écran qui a été l'insertion /suppression de pages ne contenant qu'un seul élément d'entrée. A des retards allant jusqu'à 30 secondes avec un seul visible de saisie de texte élément de la page (et dans l'ensemble des DOM). D'autres insérés dynamiquement des pages avec un seul ou plusieurs saisies de texte dans le même webapp n'étaient pas touchés par la saisie de retard. Comme d'autres l'ont mentionné, après le délai initial, le champ de saisie serait de se comporter normalement sur les événements de focus (même si la dynamique de la page contenant l'élément d'entrée a été retiré de la DOM, alors dynamiquement un nouveau rendu/réintroduites dans les DOM).

Sur une intuition sur la base de ces comportements, a tenté le suivant sur la page de la charge:

$("#problème d'entrée").focus(); $("#problème d'entrée").blur();

Alors que le ci-dessus s'exécute immédiatement, sans délai, le résultat de fin est postérieure n'est pas des retards lors de l'entrée reçoit le focus via l'interaction de l'utilisateur. Ne peut pas expliquer la raison derrière ce travail, mais il semble fonctionner de manière cohérente pour mon application, tandis que d'autres ont suggéré des corrections ont échoué.

Answer 4

J'ai le même freezeing problème.

Je ne suis pas sûr que nous sommes dans la même situation.

voici ma version de démonstration:http://tedzhou.github.io/demo/ios7sucks.html

Dans ma page, j'utilise un <p> élément avec onclick attribut comme un bouton. Lorsque l'utilisateur cliquera sur le bouton, la page de modification d'un textarea. Puis un clic sur il gèle le navigateur.

Le temps de congélation passé concernant les numéros des éléments du dom. Dans mes pages, il y a 10000 éléments, qui font de gel par+ de 10 secondes.

Nous pouvons résoudre le problème en changeant l' <p> élément du réel <button>, ou de réduire les nums des éléments du dom.

ps: désolé pour mon mauvais anglais. LOL

Answer 5

Le problème principal pour moi était avec les champs cachés. Fait suspendre le formulaire pendant 10-15 secondes.

J'ai réussi à me déplacer en positionnant les champs de formulaire masqués hors de l'écran.

---

Cacher:

 position: absolute;
left: -9999px;
 

Montrer:

 position: relative;
left: 0;
 

---