Iframe scrolling iOS 8

40
votes

I have an iframe and i need it to have a scrolling overflow. it seems work out in desktop, i used a work around to make it work in iOS. it works on android and iOS now. however, iOS8 it fails.

    <html>
    <body>
    <style type="text/css">
      .scroll-container {
       overflow: scroll;
       -webkit-overflow-scrolling: touch;
      }
     #iframe_survey {
      height: 100%;
     }

    .scroll-container {
     height: 100%;
     width: 100%;
     overflow: scroll;
     }
   </style>

   <div class="scroll-container scroll-ios">
   <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
   </div>
   </body>

10
iframescrolloverflowios8
Have the same problem, the iOS8 messed something really bad – Reigo Hein
Is it safari or a UIWebView app? – Reigo Hein
safari for iOS8 @ReigoHein – Adrian Mojica
chrome for iOS8 seems to have the same problem – Iggy van Lith
I had the same issue and what worked for me is giving the -webkit-overflow-scrolling:touch to dom element. Also I did some manipulations for the element height. I had to give the element height explicitly using jquery. If you can provide us with a fiddle, I can help you fix it. – Swapnil Mhaske

10 Answers

36
votes

Use the code in this way

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>
35
votes

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>
6
votes

I finally got mine working after many hours and testing. Basically what worked for me was this (shown as inline styling to demo). Making the outer div overflow auto keeps it from displaying an extra set of scrollbars on desktops.

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;"> 
   <iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>
3
votes

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 !important after that and works just fine!

-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
3
votes

I found that fixes 1 and 2 work on iOS 11, but I also found that in loading a responsive page into the iframe, overflow-x: hidden; was also needed to keep the iframe from moving left and right on scroll y attempts. Just FYI.

2
votes

There is a bug in iOS 8 that breaks scrolling all together when -webkit-overflow-scrolling:touch has been applied to anything that is overflown.

Have a look at the issue I posted a few weeks ago: -webkit-overflow-scrolling: touch; breaks in Apple's iOS8

1
votes

The must is define your scroll-container to fixed for the div is a fullscreen size. Then inside the iframe create a main content who have a properties scrolling.

Inside you iframe, in the mainContainer-scroll, you can add:

  • -webkit-overflow-scrolling: touch //For active smooth scroll
  • -webkit-transform: translate3d(0, 0, 0) //For material acceleration
  • overflow-y:scroll; //For add scrolling in y axis
  • position:absolute;height:100%;width:100%;top:0;left:0; //For fix the container

Main page

<html>
    <head>
        <style type="text/css">
            #iframe_survey {
                height: 100%;
            }

            .scroll-container {
                height: 100%;
                width: 100%;
                position:fixed;
            }
        </style>
    </head>
    <body>
        <div class="scroll-container scroll-ios">
            <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
        </div>
    </body>
</html>

Inside Iframe

<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
    <div class="Content" style="height:2000px;width:100%;background:blue;">
    </div>
</div>
0
votes

Not knowing what is on the other end of "www.iframe.com"...but for me, in that file's css I added:

body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

That fixed it.

0
votes

You have to use on body style or overflow:scroll;

Or also use 

<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>
0
votes

I was able to make an iframe scroll in iOS by placing an iframe inside a div (which acts as container) and apply the styles as follows and this works perfectly.

.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}

As i am working in GWT, for GWT people here is the suggestion. In case of GWT just place an iframe in ScrollPanel (div) and apply the styles as above.