browser iOS - iFrame salta all'inizio quando si modifica il css o il contenuto utilizzando JavaScript

Question

Questo problema sembra essere stato intorno per sempre. In alcune circostanze specifiche, i browser iOS superano questo bug frustrante.

Il problema:

Se si dispone di una pagina web che contiene un iFrame e si sta modificando il documento contenuti iFrame a livello di codice, l'iFrame passerà alla parte superiore della pagina. Tuttavia, ciò accade solo se la pagina, prima della manipolazione del DOM, è oltre l'altezza, in genere questa sembra essere una lunghezza maggiore del doppio della lunghezza del viewport.

Questo problema viene visualizzato indipendentemente dal fatto che si modifichi la struttura DOM o si modificino le proprietà di stile.

Questo bug è presente solo su iOS, tra cui l'ultima release come di questo tempo (9,2)

Answer 1

Descrizione del problema:

Il problema sembra essere che i browser in iOS (tra cui cromo come usa the same rendering engine) non stanno calcolando correttamente l'altezza di iFrame, questo sta causando un comportamento saltuario quando i rifacimenti si verificano nel browser.

Le soluzioni:

Soluzione A: aggiungendo il seguente codice al foglio di stile iFrame risolve il problema nella maggior parte dei casi, però scorrimento per eventi di trascinamento ecc può presentare problemi con questo approccio.

html, body { 
    height: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
} 

Soluzione B: Quando il contenuto iFrame ha reso, si dovrebbe calcolare l'altezza del contenuto iFrame quindi impostare il valore in modo esplicito sull'elemento iFrame con uno stile in linea in javascript. Questo valore deve essere aggiornato man mano che il contenuto viene modificato o aggiunto in iFrame, è necessario assicurarsi che l'altezza sia sempre corretta per impedire il ripetersi del salto.

Questo presenta problemi quando si tratta di plugin e widget di terze parti che alterano la pagina senza richiami ovvi. Il caso migliore per affrontare questo per ora è l'uso di mutation observers.

Answer 2

Se si usa un po 'di codice come questo

var doc = document.getElementById(id).contentWindow.document; 
doc.open(); 
doc.write(data); 
doc.close(); 

tenta di rimuovere doc.close(); mi ha aiutato.