molendijk

On iOS, a line like:

Code:

<iframe src="http://www.dynamicdrive.com" style="position: relative; width: 300px; height: 300px" frameborder="0"></iframe>

won't produce a scrollable iframe having the height specified above, but an iframe whose height is automatically adapted to its contents. What scrolls, then, is not the iframe on the page, but the page itself.

There's a way to force iOS to behave like you would expect. All you have to do is wrap the iframe in a div whose width and height are what you want the iframe to look like, then give the iframe 100% width and height and finally add onload="var iOS=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream; if(iOS){this.parentNode.style.webkitOverflowScrolling = 'touch'; this.parentNode.style.overflowY = 'scroll';}" to the iframe. Example:

Code:

<div style="position: relative; width: 300px; height: 300px ">
<iframe src="http://www.dynamicdrive.com" style="position: absolute; width: 100%; height: 100%" frameborder="0" onload="var iOS=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream; if(iOS) {this.parentNode.style.webkitOverflowScrolling = 'touch'; this.parentNode.style.overflowY = 'scroll';}" ></iframe>
</div>