Frame-Höhenprobleme unter iOS (mobile Safari)

Question

Dec 16, 2015, 08:02 PM

iframe ios mobile-safari javascript iphone

Frame-Höhenprobleme unter iOS (mobile Safari)

Beispielseitenquelle:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
    <div class="header" style="height: 100px; background-color: green;"></div>

    <iframe src="http://www.wikipedia.com"
            style="height: 200px; width: 100%; border: none;"></iframe>

    <div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>

Das Problem ist, dassheight von200px aus dem IFrames-Inline-Stil wird auf einer mobilen Safari ignoriert:

Auch ich möchte die Höhe des IFrame dynamisch über Vanilla JavaScript ändern, was mit dem folgenden Code überhaupt nicht funktioniert:

document.getElementsByTagName('iframe')[0].style.height = "100px"

Der Wert desheighter @ -Stil wird gemäß den Dev-Tools korrekt geändert, aber einfach ignoriert, da sich die tatsächlich gerenderte Höhe des IFrame nicht ändert.

Dies scheint nur ein Problem in Mobile Safari zu sein und funktioniert erwartungsgemäß mit den neuesten Versionen von Desktop Safari, Firefox, Chrome, Androids WebView usw.

Testseite:http: //devpublic.blob.core.windows.net/scriptstest/index.htm

Ps.: Ich habe dies mit verschiedenen Geräten im Browserstack getestet und auch die Screenshots dort aufgenommen, da ich kein aktuelles iDevice zur Hand habe.