Mobile Safari su iOS si arresta in modo anomalo su grandi pagine

Ho un problema in cui Mobile Safari si arresta in modo anomalo durante il caricamento e la manipolazione del DOM con jQuery quando le pagine diventano troppo grandi.

Ho lo stesso problema su iPhone e iPad.

Qual è il modo migliore per risolvere le pagine mobili per trovare l’errore? Ci sono problemi noti che potrebbero bloccare Mobile Safari?

In realtà ho trovato il problema. Non era con JS come pensavo, ma con il CSS. Ho aggiunto la class per fare in modo che una transizione CSS svanisca in alcuni elementi. Per gli utenti anonimi questi elementi erano display: none; e probabilmente non ha mai eseguito la transizione di opacità.

La cosa strana è che le transizioni erano esattamente su due elementi. Quindi, perché questo si arresta solo su thread lunghi con oltre 100 commenti?

Quindi la linea di fondo è la seguente: -webkit-transition ha bloccato la pagina su Safari mobile.

Aveva lo stesso problema, per me era -webkit-transform: translateZ(0); che ha causato il crash di Safari.

So che questa domanda è stata accolta con successo ma volevo solo mettere i miei cinque cent perché ho sbattuto la testa contro il muro su questo un paio di volte:

Come la maggior parte delle risposte ha già indicato, di solito si tratta di problemi di memoria. Quasi tutto può essere l’ultimo bit che alla fine si capovolge sul “mucchio di memoria” come un translateZ o altro.

Tuttavia nella mia esperienza non ha nulla a che fare con il comando CSS (o JS) in specifico. Capita solo che l’ultima transizione sia stata troppo.

Ciò che mi aiuta molto è mantenere tutto ciò che non è visibile in questo momento sotto display: none . Questo potrebbe sembrare primitivo, ma in realtà fa il trucco. È un modo semplice per dire al renderer del browser che non hai bisogno di questo elemento in questo momento e quindi rilascia la memoria. Ciò consente di creare scroller verticali lunghi miglia con tutti i tipi di effetti 3D purché si nascondano elementi che non si stanno utilizzando in questo momento.

Il problema principale con qualsiasi app iOS è l’utilizzo della memoria. Pertanto, è probabile che le tue pagine utilizzino troppa memoria.

Mobile Safari utilizza una tecnica intelligente in modo che non tutta la pagina debba risiedere in memoria in un dato momento, solo una parte di esso. Forse potresti controllare se qualcosa nella tua pagina sconfigge questo meccanismo o lo rende meno efficace.

In ogni caso, per dare più suggerimenti al punto, maggiori informazioni sulla tua pagina sarebbero davvero grandiose.

A proposito, potresti avere alcuni suggerimenti dal registro degli arresti anomali che il dispositivo memorizza. Controlla se riesci a trovarlo sotto Impostazioni:

  1. Generale
  2. Di
  3. Diagnostica e utilizzo
  4. Diagnostica e dati di utilizzo

Se si tratta di un problema di memoria, dovresti trovare qualcosa come “signal (0)”; Non sono sicuro se questo possa significare solo “ucciso a causa dell’uso della memoria”, ma di solito lo do per scontato quando ho trovato un segnale (0).

Altrimenti, potrebbe dirti cosa c’è che non va …

Spero che questo ti aiuti.

Ci sono sia limiti di memoria che limiti di tempo di esecuzione di Javascript, anche se è un po ‘confuso su come potresti effettivamente colpirli. Rapporti comuni derivano dal fatto che una pagina con una dimensione superiore a 10 MB presenta problemi e l’esecuzione di Javascript è limitata a 10 secondi.

Vedi la documentazione di Apple per maggiori informazioni.

Recentemente ho riscontrato un problema relativo al crash di Safari mobile nelle pagine web-app contenenti molte immagini (più di 30 erano sufficienti) e alcune trasformazioni per il menu. Dopo un sacco di tentativi ed errori, ho optato per una soluzione simile a quella di LinkedIn , ma per lo scrolling infinito usando angularjs. Ho usato requestAnimFrame e due div espandibili / restringenti (con attributi di stile js) nella parte superiore e inferiore dell’elenco per rimuovere tutti i contenitori di immagini (con altre cose sovrapposte in alto) tranne alcuni che sono vicini al viewport. Le prestazioni di scorrimento (native, no js) sono soddisfacenti e il consumo di memoria è sotto controllo.

Ho avuto un problema simile, la pagina web ha funzionato come un fascino su dispositivi Android e si è schiantato su IOS (iphone e simulatore).

Dopo molte ricerche (usando anche ios_webkit_debug_proxy) ho scoperto che il problema era connesso all’evento jQuery ready.

L’aggiunta di un piccolo timeout ha risolto il problema. La mia applicazione utilizzava anche iframe.

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