Using iframes with mobile safari

April 29, 2012 by 1 Comment

If you wish to use iframes on a website or application that should be accessible by users on mobile safari you should be aware that you cannot constrain the width and height of the iframe on your side. If the content that is loaded within the iframe is higher or wider than what you intended, the iframe will simply grow and push your layout in ways you are not intending. Furthermore, if you actually wanted to limit the height of the iframe resulting in the content being scrollable this will not be the case.

Let’s show how the scrollable iframe problem can be solved.

default.htm

<html>
	<head>
		<title></title>
	</head>
	<body>

		<div style="width: 800px; height: 400px; border: solid 1px #FF0000; overflow: scroll; -webkit-overflow-scrolling: touch">
			<iframe style="width: 800px" src="frame.htm"></iframe>
		</div>

	</body>
</html>

frame.htm

<html>
	<head>
		<title></title>
	</head>
	<body>

		<div style="width: 1200px; background-color: #0000FF; text-align: center">
			<h1>AAAAAAAAAAAAAAAAAAAAAA</h1>
			<h1>BBBBBBBBBBBBBBBBBBBBBB</h1>
			<h1>CCCCCCCCCCCCCCCCCCCCCC</h1>
			<h1>DDDDDDDDDDDDDDDDDDDDDD</h1>
			<h1>EEEEEEEEEEEEEEEEEEEEEE</h1>
			<h1>FFFFFFFFFFFFFFFFFFFFFF</h1>
			<h1>GGGGGGGGGGGGGGGGGGGGGG</h1>
			<h1>HHHHHHHHHHHHHHHHHHHHHH</h1>
			<h1>IIIIIIIIIIIIIIIIIIIIII</h1>
			<h1>JJJJJJJJJJJJJJJJJJJJJJ</h1>
		</div>

	</body>

</html>

By wrapping the iframe inside a div container and applying ‘-webkit-overflow-scrolling: touch’ to said div the iframe will now expand inside the div which hides whatever overflows allowing you to scroll the content. In the example above the iframe will grow to 1200px simply ignoring the 800px specified in default.htm. Without the div the entire 1200px would be visible but is instead cut off by the 800px wide div, making it so that your layout is at least not pushed out.

The problem

Now this maybe not be what you want. Maybe you want the width and height of the iframe to squeeze the page inside the frame as you would normally be able to do in any desktop browser. Currently, I know of no solution solving this desire and the observed behavior is as intended by Apple.

Filed Under: CSS, HTML, Mobile Safari Tagged With: , , , ,

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/whoknew.dk/public_html/wp-includes/class-wp-comment-query.php on line 399

Comments

  1. Sahil Amoli says:
    February 4, 2014 at 1:37 am

    Awesome post detailing this bizarre issue. I found it very helpful.

    The solution you mentioned does solve one of the problems but I am facing something different altogether. I have fixed positioned elements inside my iframe that need to remain at the top of the screen but since the iframe content is being stretched, the scrolling is taking place in the parent causing the fixed position to not be respected. I’ve been trying to find workarounds but have had no luck. It starting to seem like there isn’t a way to actually accomplish this.

    Do you have any thoughts/ideas/workarounds for the issue I’m facing?

    Thanks!

    Reply

Speak Your Mind

*