c-aqqw
Last Updated: February 25, 2016
·
29.56K
· stffndtz
477401 418966294784806 1504476567 o

Scrollable iframe on mobile Safari

In order to make an iframe scrollable on iOs, you have to add the CSS3 property "-webkit-overflow-scrolling:touch" to the parent container.

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>
Say Thanks
Respond

12 Responses
Add your response

5944

Thank you! You just spared me a whole morning of groping in the dark! ;-)

over 1 year ago ·
9316

Thank you! works perfectly!

over 1 year ago ·
9902
0 u ft0kxt4zjtplbmmpht0650zvwmplbmj1rd06b7b1xyutkacq0ylq1tnzilrgqcsadurtzxlen6

Worked like a charm! Thanks!

over 1 year ago ·
9930
6dad31d75ea42c6aa908c2ddb394deff

Phew. Thanks!

over 1 year ago ·
9977

Yesssssss! This is the simplest, best answer to this problem I've found. Thank you!

over 1 year ago ·
11591
0 pcd07bwy4gpu9q5wylsh7zoa4p52nqqwyhj87zwdfjljwgidkkj13v0i9tl ctz5jtf38tvmqch

good one
but when i scrolling the page it jump to top page in some point,

it happened to somebody?

over 1 year ago ·
13875
Dd4772e960d807677d01c207736f5e28

Cool! fine tanks!

over 1 year ago ·
14510
0 rm zu jjsjgmxzkkmfnquhhssgufxjkkmw6euhhqty70rmpxbegjg8ye zrrbv5evsri b9mqoqd

Great! You saved my time! Thanks!

over 1 year ago ·
14631
0 v24zqxedi543eioynwywqqswi8auoduy4d2fqqezq5vgzwupnohns6orlamtwoskrfvqr34pc8qv

Awesome! working fine. Thanks!

over 1 year ago ·
14815
Ff21512c93679ccb46cc77bdcf495460

I have the same issue for jump back to top when touch the page at some point. Anyone solve this issue? Thanks.

over 1 year ago ·
24968
None

I don't think this works: http://output.jsbin.com/sesenuziri

over 1 year ago ·
26274
None

It will jump to the top any time the iframe content changes. The only workaround that I can find is to explicitly set the height of the iframe to the height of the contents. Something like this (using jQuery).

$('iframe').load(function() {
var self = this;
var oldHeight = 0;
function resizeiframe(eventObject) {
var newHeight = $(self.contentWindow.document).height();
if (newHeight !== oldHeight) {
oldHeight = newHeight;
$(self).css("height", newHeight);
}
}
resizeiframe();
$(self.contentWindow).resize(resizeiframe);
});

over 1 year ago ·