web-dev-qa-db-de.com

Mobile Safari auf iOS stürzt auf großen Seiten ab

Ich habe ein Problem, bei dem Mobile Safari abstürzt, wenn das DOM mit jQuery geladen und bearbeitet wird, wenn die Seiten zu groß werden.

Ich habe das gleiche Problem sowohl auf dem iPhone als auch auf dem iPad.

Was ist der beste Weg, um mobile Seiten zu finden, um den Fehler zu finden? Gibt es bekannte Probleme, die Mobile Safari zum Absturz bringen könnten? 

34
Johan Nordberg

Ich habe tatsächlich das Problem gefunden. Es war nicht mit JS, wie ich dachte, sondern mit CSS. Ich habe Klasse hinzugefügt, um einen CSS-Übergang vorzunehmen, um einige Elemente einzublenden. Für anonyme Benutzer hatten diese Elemente display: none; und führten wahrscheinlich keinen Opazitätsübergang aus.

Das Merkwürdige ist, dass die Übergänge genau zwei Elemente hatten. Warum würde dies nur bei langen Threads mit über 100 Kommentaren abstürzen?

Die Quintessenz lautet also: -webkit-transition hat die Seite auf Mobile Safari abgestürzt.

27
Johan Nordberg

Hatte das gleiche Problem, für mich war -webkit-transform: translateZ(0); der Absturz von Safari. 

21
IndrekV

Ich weiß, dass diese Frage erfolgreich beantwortet wurde, aber ich wollte nur meine fünf Cents einsetzen, da ich den Kopf schon einige Male gegen die Wand geklopft habe:

Wie die meisten Antworten bereits gezeigt haben, kommt es in der Regel auf Speicherprobleme an. Fast alles kann das letzte Bit sein, das letztendlich über den "Speicherstapel" kippt, ähnlich wie ein translateZ oder etwas anderes. 

Meiner Erfahrung nach hat es jedoch nichts mit dem eigentlichen CSS (oder JS) -Befehl zu tun. Es war einfach so, dass der letzte Übergang zu viel war.

Was mir normalerweise sehr hilft, ist, alles, was zu diesem Zeitpunkt nicht sichtbar ist, unter display: none aufzubewahren. Das klingt vielleicht primitiv, macht aber tatsächlich den Trick. Es ist eine einfache Möglichkeit, dem Renderer des Browsers mitzuteilen, dass Sie dieses Element derzeit nicht benötigen und daher Speicher freigibt. Auf diese Weise können Sie kilometerlange vertikale Scroller mit allen möglichen 3D-Effekten erstellen, solange Sie Elemente ausblenden, die Sie derzeit nicht verwenden. 

19
Mathias

Das Hauptproblem bei jeder iOS-App ist die Speichernutzung. Daher ist es wahrscheinlich, dass Ihre Seiten zu viel Speicher verwenden.

Mobile Safari verwendet eine clevere Technik, damit sich nicht die gesamte Seite zu einem bestimmten Zeitpunkt im Speicher befinden muss, sondern nur ein Teil davon. Vielleicht könnten Sie überprüfen, ob etwas auf Ihrer Seite diesen Mechanismus beseitigt oder die Wirksamkeit beeinträchtigt.

In jedem Fall wären mehr Informationen zu Ihrer Seite wirklich großartig, wenn Sie mehr zu den Punktvorschlägen machen möchten.

Übrigens könnten Sie einige Hinweise aus dem Absturzprotokoll erhalten, das vom Gerät gespeichert wird. Überprüfen Sie, ob Sie es unter Einstellungen finden können:

  1. Allgemeines
  2. Über
  3. Diagnose und Verwendung
  4. Diagnose- und Nutzungsdaten

Wenn es sich um ein Speicherproblem handelt, sollten Sie etwas wie "Signal (0)" finden. Ich bin mir nicht sicher, ob dies nur bedeuten kann, dass "aufgrund von Speicherbelegung" getötet wird, aber ich halte das normalerweise für selbstverständlich, wenn ich ein Signal gefunden habe (0).

Ansonsten könnte es Ihnen sagen, was falsch ist ...

Hoffe das hilft.

12
sergio

Es gibt sowohl Speicherlimits als auch Zeitlimits für die Ausführung von Javascript, obwohl es ein wenig unscharf ist, wie Sie diese tatsächlich treffen können. Häufige Berichte sind die, dass bei einer Seite mit einer Größe von mehr als 10 MB Probleme auftreten und die Ausführung von Javascript auf 10 Sekunden beschränkt ist.

Siehe Dokumentation von Apple für weitere Informationen.

3
Joshua

Ich hatte kürzlich ein Problem mit dem Absturz der mobilen Safari auf Web-App-Seiten, die viele Bilder enthielt (30+ waren genug) und einige Änderungen für das Menü. Nach vielen Versuchen und Irrtümern entschied ich mich für eine Lösung, die der von LinkedIn ähnelt, aber für das unendliche Scrollen mithilfe von anglejs. Ich habe requestAnimFrame und zwei Expanding/Shrink-Divs (mit js-Stilattributen) oben und unten in der Liste verwendet, um alle Bildcontainer (mit anderen Elementen, die darüber gelegt werden) zu entfernen, mit Ausnahme einiger weniger sind in der Nähe des Viewports. Die Bildlaufleistung (native, keine js) ist in Ordnung und der Speicherverbrauch wird geprüft.

1
Florian

Ich hatte ein ähnliches Problem, die Webseite funktionierte auf Android-Geräten wie ein Zauber und stürzte auf IOS (iPhone und Simulator) ab.

Nach langer Recherche (auch mit dem ios_webkit_debug_proxy) stellte ich fest, dass das Problem mit dem Ereignis jQuery ready zusammenhängt.

Das Hinzufügen eines kleinen Timeouts löste das Problem. Meine Anwendung verwendete auch iframes.

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