Iframe scrolling iOS 8

Question

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>

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, Oct 06 '14 at 13:24
We solved it here: http://stackoverflow.com/questions/26738764/ios8-safari-webkit-overflow-scrolling-touch-issue/26743685#26743685 — Krijn Rijshouwer, Nov 05 '14 at 08:39

score 36 · Answer 1 · answered Oct 04 '14 at 02:56

36

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>

answered Oct 04 '14 at 02:56

Usman Khawaja

809
14
28

This is the better solution, for me it's working in ios8, but it may have rendering problems when iframe height is bigger than body height. See here for a more detailed explanation: http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ – Miquel Oct 04 '14 at 09:30
The basic difference is using `overflow:auto` instead of `overflow:scroll`? That's not working for me. – althaus Oct 15 '14 at 09:46

score 35 · Answer 2 · edited Mar 15 '16 at 16:32

35

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>

edited Mar 15 '16 at 16:32

falsarella

12,217
9
69
115

answered Oct 07 '15 at 13:43

gem007bd

1,085
13
11

This works really well, thanks! However, I had to use a reduced height `` to avoid a second scrollbar in my browser (Chrome 71) – Peter T. Feb 05 '19 at 16:40

score 6 · Answer 3 · edited Jan 23 '16 at 19:30

6

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>

edited Jan 23 '16 at 19:30

Tunaki

132,869
46
340
423

answered Jan 23 '16 at 19:29

Robin B

571
6
10

"Making the outer div overflow auto keeps it from displaying an extra set of scrollbars on desktops." And here's point, thank you! For me, actually, `overflow: auto; -webkit-overflow-scrolling: touch;` on the wrapper and `display: block` on the iframe was enough. – bencergazda Mar 25 '16 at 15:27

score 3 · Answer 4 · edited Mar 09 '15 at 14:39

3

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;

edited Mar 09 '15 at 14:39

Marvin Emil Brach

3,984
1
32
62

answered Mar 09 '15 at 14:12

Renato Dantas

31
1

score 3 · Answer 5 · edited Mar 26 '18 at 22:37

3

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.

edited Mar 26 '18 at 22:37

Jason Roman

8,146
10
35
40

answered Mar 26 '18 at 22:12

Joe Williams

39
2

score 2 · Answer 6 · edited May 23 '17 at 12:10

2

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

edited May 23 '17 at 12:10

Community

1
1

answered Oct 27 '14 at 15:32

Jamie Beech

913
1
9
8

score 1 · Answer 7 · answered Feb 15 '17 at 11:25

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>

score 0 · Answer 8 · answered Oct 01 '14 at 21:15

0

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.

answered Oct 01 '14 at 21:15

deep rock

36
3

yes, that fixes it if you have access to the iframe css. if you dont. there's still no answer. – Adrian Mojica Oct 01 '14 at 21:17

score 0 · Answer 9 · answered Oct 06 '14 at 05:34

0

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>

answered Oct 06 '14 at 05:34

Lokesh Kumawat

1
1

score 0 · Answer 10 · edited Sep 07 '16 at 12:22

0

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.

edited Sep 07 '16 at 12:22

falsarella

12,217
9
69
115

answered Mar 17 '15 at 16:04

Manne Teja

11
7

welcome@user3548310, for your next post i recommand you to read: http://stackoverflow.com/editing-help – AdrieanKhisbe Mar 17 '15 at 16:25

Iframe scrolling iOS 8

10 Answers10

Linked