CODEWITHSUNDEEP
htmlcssiframesafariresponsive
Aditya Shukla
Aditya Shukla

Reputation: 51

How to make iframe work properly in iOS safari

I'm having trouble with displaying a Bootstrap responsive page inside an iframe in iOS safari browser. It works fine in Android Chrome. In one of the iframes, the page loses its responsiveness and doesnt even scroll (horizontally as well as vertically). In another iframe, a different page loses its footer and vertical scrolling displays the content behind the iframe.

The page which loses responsiveness

Scrolling issue

Used the following code

<iframe src="add.php" frameborder="0" overflow-x: hidden; overflow-y:hidden; style="height:100%;width:100%;"></iframe>

separately tried the following

<iframe src="add.php" frameborder="0" style="height:100%;width:100%;"></iframe> 

iframe{
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

As well as :

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

Using jQuery 1.11.3, Boostrap 3.3.5, respond.js, html5shiv.js, modernizr.js

Upvotes: 4

Views: 17060

Answers (1)

user6241295
user6241295

Reputation:

Try to use this:

iframe {
    border:none;
    position: fixed;
    width:100%;
    height:100%;
    overflow: auto;
}

This will make your iframe fit to the screen so that, everything remains on your view. and make sure that, you have removed margin from body

Here is preview of W3Schools in iframe

Hope works fine.

Upvotes: 2

Related Questions