IFRAMEs Automagically Fit Their Content on iOS

16 Dec 2011 | #ios #mobile #safari #iframe #html

The result of a recent struggle with IFRAMEs on iOS Safari is an interesting discovery: IFRAMEs can expand to fit their (content documents) content without any JavaScript. Even cross-domain! There are two important notes:

• Adding scrolling="no" attribute to IFRAME disables this behavior.
• It only works with dynamically changed content: the IFRAME will not fit the initial content.

Example code:

<iframe width="100" height="100" src="content.html"></iframe>

content.html:

<div>
	<button 
		type="button"
		onclick="this.parentNode.style.height='300px'">
		resize
	</button>
</div>

Click the button and see the magic! Try example code online from your iOS device.

Tested on iOS4 and iOS5, does not work in any other browser I tried. Could not find any relevant documentation on this behavior except a StackOverflow post.