Iframe scrolling iOS 8

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>

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>

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>

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>

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;

Iframe scrolling iOS 8

Related

Recent Posts