Safari mobile sur iOS se bloque sur de grandes pages

J'ai réellement trouvé le problème. Ce n'était pas avec JS comme je le pensais, mais avec le CSS. J'ai ajouté une classe pour faire une transition CSS pour disparaître dans certains éléments. Pour les utilisateurs anonymes, ces éléments ont été display: none; Et n'a probablement jamais couru la transition d'opacité.

Il est étrange que les transitions soient exactement sur deux éléments. Alors, pourquoi cela n'aurait-il que crash sur de longs threads avec plus de 100 commentaires?

La ligne de fond est donc: -webkit-transition a écrasé la page sur le safari mobile.

A eu le même problème, pour moi, c'était -webkit-transform: translateZ(0); Cela a causé le crash de Safari.

Je sais que cette question a été répondu avec succès, mais je voulais juste mettre mes cinq cents aussi, car j'ai frappé la tête contre le mur à plusieurs reprises:

Comme la plupart des réponses l'ont souligné, cela se résume généralement à des problèmes de mémoire. Presque tout peut être le dernier bit qui finalement astuces sur le "pile de mémoire" comme un translateZ ou autre chose.

Cependant, dans mon expérience, cela n'a rien à voir avec la commande CSS (ou JS) en particulier. Il se trouve que la dernière transition était trop.

Ce qui tend à m'aider beaucoup est de garder tout ce qui n'est pas visible à ce moment-ci sous l' display: none . Cela pourrait sembler primitif, mais en fait l'affaire. C'est un moyen simple de dire au gestionnaire du navigateur que vous n'avez pas besoin de cet élément en ce moment et que, par conséquent, vous libère de la mémoire. Cela vous permet de créer des scrollers verticaux de mile long avec toutes sortes d'effets 3d tant que vous cachez les éléments que vous n'utilisez pas pour le moment.

Le problème principal avec toute application iOS est l'utilisation de la mémoire. Donc, il est probable que vos pages utilisent trop de mémoire.

Mobile Safari utilise une technique intelligente, de sorte que la page entière ne doit pas résider 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 ne parvient pas à ce mécanisme ou le rend moins efficace.

Dans tous les cas, pour donner plus au point des suggestions, plus d'informations sur votre page serait vraiment génial.

Soit dit en passant, vous pourriez avoir quelques conseils dans le journal des crash que l'appareil stocke. Vérifiez si vous pouvez le trouver sous Paramètres:

1. Général
2. Sur
3. Diagnostic et utilisation
4. Diagnostic et données d'utilisation

S'il s'agit d'un problème de mémoire, vous devriez trouver quelque chose comme "signal (0)"; Je ne sais pas si cela ne signifie que "tué en raison de l'utilisation de la mémoire", mais je prends généralement cela pour acquis quand 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 des limites de mémoire et des limites de temps d'exécution de Javascript, mais il est un peu flou quant à la façon dont vous pouvez réellement les frapper. Les rapports communs viennent qu'une page avec une taille supérieure à 10 Mo aura des problèmes et l'exécution Javascript est limitée à 10 secondes.

Voir la documentation d' Apple pour plus d'informations.

J'ai récemment eu un problème avec le safari mobile qui s'écrasait sur les pages d'applications Web contenant beaucoup d'images (30+ suffisaient) et quelques transformations pour le menu. Après beaucoup d'essais et d'erreurs, je me suis installé avec une solution similaire à ce que fait LinkedIn , mais pour un défilement infini utilisant angularjs. J'ai utilisé requestAnimFrame et deux divs en expansion / rétrécissement (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-uns proches de la fenêtre. La performance de défilement (native, no js) est correcte et la consommation de mémoire est en échec.

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 beaucoup de recherches (en utilisant aussi ios_webkit_debug_proxy), j'ai constaté que le problème était lié à l'événement prêt jQuery.

L'ajout d'un peu de délai a résolu le problème. Ma demande utilisait également des iframes.

 $(document).ready(function () { window.setTimeout(function () { ready(); }, 10); });