2

If I load this into an UIWebView in iOS, the iFrame fits the screen as expected:

<!DOCTYPE html>
<html>
<head>
<style>
    body, html {
        height: 100%;
        margin: 2px;
    }
</style>

<script>

    function start(){
        var iframe = document.body.appendChild(document.createElement("iframe"));

        iframe.style.cssText = "width: 100%; height: 100%; background-color: yellow; border: 1px solid yellow; overflow: hidden";
        iframe.src = "about:blank";
    }

</script>

</head>
<body onload='start()'>
</body>
</html>

The iframe yellow border will fit parent. And that's ok. But if you then load something into the iFrame (e.g. iframe.src='something.html') that contains elements exceedeing the containing page size like this:

<div style="width: 10000; height: 10000; background: yellow">

the iFrame will grow as well exceeding the container document. This happens on UIWebView only. On any other browser or platform, the iFrame bounding box will stay and its inner document contents will be cropped as expected.

lviggiani
  • 5,824
  • 12
  • 56
  • 89
  • I have a same issue. But i see that: it's about Safari. I have a responsive web site. The iframe, in this web site, grows. Safari and UIWebview has same issue. http://stackoverflow.com/questions/5267996/how-to-properly-display-an-iframe-in-mobile-safari/5359546#5359546 – a.u.b Nov 18 '16 at 11:44

0 Answers0