iOS-browser - iFrame springt nach oben, wenn die css ändern oder Inhalte, die mit JavaScript

Scheint dieses problem schon ewig. Unter einigen spezifischen Umständen, iOS-Browser-Oberfläche diese frustrierende Fehler.

Das Problem:

Wenn Sie eine web-Seite, die enthält einen iFrame, und Sie modifizieren die iFrames content-Dokument programmgesteuert, der iFrame wird der Sprung an die Spitze der Seite. Dies geschieht jedoch nur, wenn die Seite, vor der DOM-manipulation, ist darüber hinaus etwas an Höhe, in der Regel scheint dies eine Länge, die größer ist als zweimal die Länge des Viewports.

Diese Frage erscheint unabhängig davon, ob Sie geändert wird, die DOM-Struktur oder ändern der Stil-Eigenschaften.

Dieser Fehler ist nur vorhanden auf iOS, einschließlich der neuesten Version, die ab diesem Zeitpunkt (9.2)

InformationsquelleAutor Matt | 2016-01-13
  1. 44

    Problem Beschreibung:

    Das Problem scheint zu sein, dass Browser in iOS (einschließlich chrome, wie es verwendet die gleiche rendering-engine) sind nicht korrekt die Berechnung der Höhe des iFrames, diese verursacht zu springen Verhalten, wenn Sie neu auftreten, auf die browser.

    Die Lösungen:

    Lösung A: Hinzufügen von den folgenden code, um die iFrame-stylesheet behebt das Problem in den meisten Fällen, wenn das scrollen bei drag-events, kann Probleme mit diesem Ansatz.

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

    Lösung B:
    Wenn der iFrame erbracht hat alles, sollten Sie berechnen die Höhe des iFrame-Inhalte legen Sie dann die Höhe ein Wert explizit auf das iFrame-element mithilfe von inline-style in javascript. Dieser Wert muss aktualisiert werden, wie Inhalte geändert oder Hinzugefügt in dem iFrame, müssen Sie sicherstellen, dass die Höhe ist immer richtig, um zu verhindern, dass der Sprung von reoccurring.

    Dies stellt Herausforderungen beim Umgang mit third-party-plugins und-widgets ändern die Seite, die keine offensichtliche Rückrufe. Der beste Fall für den Umgang mit dieser für jetzt, ist die Verwendung von mutation Beobachter.

    • Wow, diese hat den trick für mich (Lösung A). Ich habe die Suche nach Monate. Danke!
    • Lösung funktionierte auch bei mir. Alle drei Arten sind wichtige, sich zu bewerben.
    • Getestet habe ich für immer und Versuchte immer!!! Und fand das!!! und es hat funktioniert!! THANKSSS
    • Wenn ich dies tun, es hält das springen, aber es bewirkt, dass Fotos, unterhalb der Falte auf dem iPhone nicht angezeigt. Ich habe versucht, hinzufügen von -webkit-transform: translate3d(0,0,0); Forschung auf dem forum sagen, das löst das Problem aber für mich ist es nicht. Jemand löste so etwas?
    • Konnte Sie zeigen eine test-Website, die Exponate zu dem Thema?
    • Ich hatte einen kurzen Blick und Sie sind mit einer alten jQuery lazy loading-Bibliothek, ist es fast sicher das problem. Ich erwarte, dass es ist nicht zu erkennen, dass Sie scrollen, so dass die Vermögenswerte bleiben unbelastet.
    • Ich habe aktualisiert, um v1.7.5 aber es scheint nicht gehabt zu haben, ein Effekt, cache gelöscht, wie gut. Ich hab das versucht mit und ohne -webkit-transform: translate3d(0,0,0);
    • Ich habe sortiert das jetzt. Für mich war es ein Tatsächliches Problem mit Lazy load. Löst sich mein Problem, ich sagte Lazy Load tatsächlich laden Sie die Bilder zuerst, dies kann durch die Einstellung "Schwellenwert : 400' oder eine größere Anzahl, wenn Sie mehr Bilder laden unter die Falten. Für mich hatte ich nur ein paar und deshalb finde ich, dass die Ladezeit nicht beeinträchtigt, wie die Bilder sind auch kleiner in der Dateigröße.
    • Froh, Ihnen zu helfen, gute lucjk
    • Danke @Yoda, ich war versucht, um dieses Problem zu beheben aus den letzten 3 Tagen.. Schließlich Ihnen helfen, um loszuwerden, von der Ausgabe.
    • Ist es ein bug eingereicht mit Webkit, die wir befolgen sollten/upvote? Ich habe einige suchen und konnte ihn nicht finden
    • Vielen Dank, es funktioniert für mich

    InformationsquelleAutor Matt
  2. 0

    Wenn Sie code wie diesen 

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

    Versuchen, Sie zu entfernen doc.close(); Es hat mir geholfen.

    InformationsquelleAutor Eugene
  3. 0

    Fand ich eine Lösung in Ionischer 3, es installieren können, die native Tastatur und deaktivieren Sie den Autofokus bei der Eingabe mit dem nächsten code

    import { Tastatur } von '@ionic-native/Tastatur";

    diese.Tastatur.disableScroll(true);

    InformationsquelleAutor Boris Benalcazar
Schreibe einen Kommentar