Mobile Safari sur iOS se bloque sur les grandes pages
J'ai un problème où Mobile Safari se bloque lors du chargement et de la manipulation du DOM avec jQuery lorsque les pages deviennent trop grandes.
J'ai le même problème sur iPhone et iPad.
Quel est le meilleur moyen de dépanner les pages mobiles pour trouver l'erreur? Existe-t-il des problèmes connus susceptibles de planter Mobile Safari?
J'ai effectivement trouvé le problème. Ce n'était pas avec JS comme je le pensais, mais avec le CSS. J'ai ajouté class pour effectuer une transition CSS afin de fondre certains éléments. Pour les utilisateurs anonymes, ces éléments avaient display: none; et n'ont probablement jamais exécuté la transition d'opacité.
La chose étrange est que les transitions étaient sur exactement deux éléments. Alors pourquoi cela ne planterait-il que sur de longs threads avec plus de 100 commentaires?
En résumé: -webkit-transition a bloqué la page d'un safari mobile.
Avait le même problème, pour moi c'était -webkit-transform: translateZ(0); qui a causé le crash de Safari.
Je sais que cette question a été répondue avec succès, mais je voulais juste mettre mes cinq sous aussi, car je me suis cogné la tête contre le mur plusieurs fois:
Comme la plupart des réponses l'ont déjà souligné, il s'agit généralement de problèmes de mémoire. Presque tout peut être le dernier élément qui finit par basculer au-dessus de la "pile de mémoire", un peu comme un translateZ ou quoi que ce soit d'autre.
Cependant, selon mon expérience, cela n'a rien à voir avec la commande CSS (ou JS) en particulier. Il se trouve que la dernière transition en était une de trop.
Ce qui a tendance à m'aider beaucoup est de garder tout ce qui n'est pas visible pour le moment sous display: none. Cela peut sembler primitif, mais fait vraiment l'affaire. C'est un moyen simple de dire au moteur de rendu du navigateur que vous n'avez pas besoin de cet élément pour le moment et libère donc de la mémoire. Cela vous permet de créer des défileurs verticaux longs avec toutes sortes d’effets 3D, à condition de masquer les éléments que vous n’utilisez pas pour le moment.
Le problème principal de toute application iOS est l'utilisation de la mémoire. Il est donc probable que vos pages utilisent trop de mémoire.
Mobile Safari utilise une technique astucieuse pour ne pas laisser la page entière en mémoire à un moment donné, mais seulement une partie de celle-ci. Peut-être pourriez-vous vérifier si quelque chose dans votre page défait ce mécanisme ou le rend moins efficace.
Dans tous les cas, pour donner des suggestions plus pointues, plus d’informations sur votre page seraient vraiment formidables.
En passant, vous pourriez avoir des indications tirées du journal des incidents stockées par le périphérique. Vérifiez si vous pouvez le trouver sous Paramètres:
- Général
- Sur
- Diagnostic et utilisation
- Données de diagnostic et d'utilisation
Si c'est un problème de mémoire, vous devriez trouver quelque chose comme "signal (0)"; je ne sais pas si cela peut seulement signifier "tué à cause de l'utilisation de la mémoire", mais je le prends généralement pour acquis lorsque j'ai trouvé un signal (0).
Sinon, cela pourrait vous dire ce qui ne va pas ...
J'espère que cela t'aides.
Il existe à la fois des limites de mémoire et des limites d’exécution Javascript, bien que cela soit un peu flou quant à la manière de les atteindre. Les rapports courants indiquent qu'une page de taille supérieure à 10 Mo posera des problèmes et que l'exécution de Javascript est limitée à 10 secondes.
Voir Documentation Apple pour plus d'informations.
J'ai récemment eu un problème avec un crash de safari mobile sur des pages d'applications Web contenant beaucoup d'images (plus de 30 suffisaient) et quelques transformations pour le menu. Après beaucoup d'essais et d'erreurs, je me suis arrangé avec une solution similaire à ce que LinkedIn fait, mais pour le défilement infini en utilisant angularjs. J'ai utilisé requestAnimFrame et deux expand/shrinking divs (avec des attributs de style js) en haut et en bas de la liste pour supprimer tous les conteneurs d'images (avec d'autres éléments superposés en haut), à l'exception de quelques sont proches de la fenêtre. Les performances de défilement (natif, pas de js) conviennent et la consommation de mémoire est contrôlée.
J'ai eu un problème similaire, la page Web a fonctionné comme un charme sur les appareils Android et s'est écrasée sur IOS (iPhone et simulateur).
Après de nombreuses recherches (en utilisant également ios_webkit_debug_proxy), j'ai constaté que le problème était lié à l'événement jQuery ready.
Ajouter un peu de délai a résolu le problème. Mon application utilisait également des iframes.
$(document).ready(function () {
window.setTimeout(function () { ready(); }, 10);
});