Workaround zum iOS-11-WebKit-iframe-Fehler
iOS-WebKit-iframe-bug Beschreibung
iOS WebKit ändert die Größe des iframes an die Größe des Inhalts (siehe Bild unten). Es ist ein bug bekannt, da 2016 und noch nicht behoben-iOS-11: https://bugs.webkit.org/show_bug.cgi?id=155198
Meine aktuellen Erkenntnisse
1. Für Feste iframe-Inhalte (z.B. video)
Es ist genug, um CSS anzuwenden unter, aber es verhindert, dass der iframe-Inhalt zu scrollen.
.fixed iframe {
width: 0;
height: 0;
min-width: 100%;
min-height: 100%;
}
2. Für scrollbaren iframe-Inhalt (z.B. Seiten)
- Wir brauchen zwei iframe-Container: eine Abgrenzung (Feste Größe) und das zweite als ein Bereich zum Blättern.
- Passen iframe-Inhalt, Ihre div-container haben muss, B/h definiert, in Pixel. Alle verwandten Maßnahmen (wie %, vw/vh) nicht funktioniert.
-
Einige RWD Seiten (sagen wir mal mit "unvollständig RWD") erleben iframe-Pufferüberlauf (iframe passt nicht in den iframe-container).
Leider können wir nicht lösen, die von der iframe-außerhalb und um dieses Problem zu lösen, Dokument in der iframe-erfordert mindestens:body { max-width: 100vw !important; }
Optional können wir skalieren, iframe Inhalt als eine Letzte resort.
-
Da 2, zu halten, container-Anteil, dann brauchen wir mindestens CSS-media-Abfragen oder JS anpassen der Höhe.
Einige unvollständige Lösungen:
- https://github.com/ampproject/amphtml/issues/11133
- https://www.spacevatican.org/2015/4/7/on-mobile-safari-and-iframes/
- Externe HTML-Datei in der Bootstrap Popover-content
- Wie man einen IFrame zu reagieren in iOS Safari?
- iFrame Höhe Automatisch (CSS)
- Machen iframe automatisch anpassen Höhe nach auf den Inhalt ohne Verwendung der Bildlaufleiste?
- Iframe scrolling iOS 8
- iOS8 Safari -webkit-overflow-scrolling: touch; Ausgabe
Mein workaround ist geschrieben in der Antwort.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist, was ich so weit gekommen. Jeden Beitrag sehr geschätzt. Neueste version auf Github-Gist.
CSS:
HTML: