Geek Answers Handbook

How to make iframe work properly in iOS Safari

I'm having trouble displaying the Bootstrap boot page internally iframein the Safari iOS browser. It works great in Android Chrome. In one of the iframespages, it loses its responsiveness and does not even scroll (horizontally as well as vertically). In another iframe, another page loses its footer, and vertical scrolling displays the content behind iframe.

A page that is losing responsiveness

Scroll problem

The following code is used.

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

I tried the following separately

<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, response.js, html5shiv.js, modernizr.js

+4
1

:

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

iframe , . , margin

W3Schools iframe

.

+2

More articles:


All Articles