Scroll IFRAMEs on iOS
For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari. For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's AJAX pageload strategy. Some research revealed that there are only two CSS properties to set and one element to set them on. Here we go!
The HTML
In the case of an IFRAME and all other HTML elements, you'll want a wrapping element like a DIV:
<div class="scroll-wrapper"> <iframe src=""></iframe> </div>
This DIV will serve as the base container for what's scrollable inside.
The CSSOne familiar property and one lesser-known property will be used to allow scrolling for the IFRAME:
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
The -webkit-overflow-scrolling: touch; property and value were created especially for the case of overflow scrolling within the browser. Without this the page will scroll when you scroll the IFRAME area; with it you get control of the IFRAME! For my site's case, I use the following:
.demo-iframe-holder {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
Keep this tip handy and remember the special CSS goes on the wrapper and not the scrollable element itself!
Thanks for the tip! Don’t you name btw, is there another solution? The issue is that I develop a web-service that should be embeddable with iframe. Like youtube, gmap and any others.. So the code should be as simple as one iframe tag, not iframe plus wrapper plus styles… I am in stuck with this now
Hi David,
Thank you very much. I already wasted my two hours to find that popup iframe scrolling is not working on iphone. Very nice clue by you.
You saved my lot of time. I was finding a wordpress plugin to do it.
Thank you so much again. Keep it up.
Cheers :)
Hi Hardeep. I am using WP Woocommerce to create the pages. These pages are loaded into an iframe (which dot not scroll very well with an IOS environment) Could you please let me know in which page and where you added the code? Thank you so much in advance.Ben
Amazingly simple yet useful fix. This just saved me hours of banging my head.
It works, but when I try to obtain
window.pageYOffsetit is always 0. Is there a way to fix it (I want to download additional content when user scrolls to the bottom of the page)?Nice solution… as long as it was working and Apple didn’t break it with iOS8. :(
2014-10-17
On your demo page the iframe is indeed scrollable, and it is the height of the full content of the page within the iframe.
However, the contents of the iframe below the first paragraph are not rendered at all on my ipad or in the iOS emulator.
http://davidwalsh.name/demo/scroll-iframes-ios.php
I also have a project where I’m trying to use an iframe and I’m getting the same behaviour.
2014-10-17
Update: This information is still correct. But the content being clipped is a new problem. The problem can be fixed if you control the page being loaded by the iframe.
Add
body { -webkit-transform: translate3d(0, 0, 0); }or any other rule that will force hardware acceleration to the page being loaded by the iframe and it should prevent the rendering of the iframe from being cut off.Help,
same problem in wordpress we load a Iframe on html5 but the iframe does scoll and return back to top everytime you touch the screen. Does anyone know where to fix this in wordpress?
Thank you David. I was working on google form to be embedded on my wordpress website i am no coder like you but i tried understanding and trying it finally works flawlessly.
Thank you so much!
Hi, it did not work for me! but I could figure out a little trick after reading this post: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/
Just put an
!importantafter that and works just fine!Thanks for posting this – I was having a really frustrating time including an externally hosted privacy policy (iubenda) in an ionic app. This tip solved it for me on iOS. Thank you!
Very useful and interesting tip. I applied it in our PresentationTube project (which uses a scrollable slide thumbnail) and I’ll keep this test page to have a look and preview the script. Thank you David: http://presentationtube.com/watch/test5.php?v=jyFfl9VDCkK
My only comment is adding the following to hide the wrapper vertical and horizontal bars:
Wow! Thanks David! You saved my day!
Thanks a lot David… You saved my day and night ;)
Thanks David, excellent tips, worked like a dream!
Hi David, i’m almost done with my website & now i’m encountering a serious problem. My iframes (links to external websites) are not loading when used as tooltip in ipad (safari). Infact, the links are also not opening. Can you please let me know the possible solution to this problem? Will the above solution work for my problem too? All the iframes are in left hand side (advertising to wellness). The website is http://www.shortkut.in. Do i need to give any more details? Thanks in advance.
The solution suggested here has been applied to a site that needs to generate reports and contain them in an iframe. That is the only way to get the app to be encapsulated as a Chrome App, and also work well in all browsers and platforms.
However, this solution is not perfect, so far. As I scroll my iOS device (an iframe inside a div with the
-webkit-overflow-scrolling: touch;andoverflow: auto;in the container division) it suddenly resets itself and starts showing only the beginning of the document inside the iframe.It does not work; the user can never see the last part of the document.
These codes aren’t working for my iframe. Here is the page with the iframe.
http://bit.ly/1TuFSQx
Hello…thanks for this great solution! I do have one glitch…on desktop view I have 2 scroll bars showing. When I remove your two lines of code from the media query for 768px, then get only one scroll bar on the desktop but the iframe then does not scroll on iPads. It still works on iPhones however.
Any suggestions?
Unfortunately, this doesn’t really work if the contents of the iframe need the correct scroll position. For example, I have a page with “to top / to bottom” navigation buttons, which appear / disappear depending on current scroll position. Obviously, they don’t work because the iframe content always “thinks” it’s at the top…