iOS iframe issue

Question

I'm using a tumblr site and adding elements to my pages: http://gcseanswers.co.uk/chemistry

I have embeded an iframe to show a document on the page, it works fine on both desktop and android devices. However you aren't able to scroll the iframe on ios.

Here is the html and css

iframe html

<div class="doc"><iframe src="https://docs.google.com/document/d/1FNsmMKZs-dGmO0Vy3V7AI25kswh6I2EW4UkD0q1EpYE/pub?embedded=true"></iframe></div>

css

.doc {
  position: relative;
  height: 500;
  overflow: hidden;
  padding-bottom: 85%;
}


.doc iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

Picture of ios:

Please can you help me fix this problem, many thanks.

Possible duplicate of: http://stackoverflow.com/questions/6613244/mobile-site-doesnt-scroll-at-all http://stackoverflow.com/questions/19167329/my-webpage-wont-scroll-down — coopersita, May 19 '16 at 16:03

JoakimE · Answer 1 · 2016-05-19T17:25:05.450

2

Try adding this to your parent iframe CSS rule. That would be the ".doc" I believe.

overflow: auto
-webkit-overflow-scrolling:touch

edited May 19 '16 at 17:25

answered May 19 '16 at 16:05

JoakimE

1,820
1
21
30

Adding that to the parent breaks the alignment of the frame: http://imgur.com/GIg56Ir – Hguin May 19 '16 at 16:16

score 0 · Answer 2 · edited May 23 '17 at 12:16

0) Small fix (not about your question, just to mention). CSS ".doc" class (file chemistry, line 402). Height should be "500px" (your wrote simply "500", it's a mistake).

1) What about your question. Its an old iOS Safari bug. To make it scrollable you can add this to ".doc" class:

overflow: auto;
-webkit-overflow-scrolling: touch;

and scrollable="no" to the iframe tag itself.

But this way iframe will be scrolled horizontally too (overflow-y won't solve the problem, because iframe will simply have greater width). And sorry, but I have no solution here (I mean it's a new question that should be solved and I can't help for now - all my attempts failed).

First of all, try this: How to get an IFrame to be responsive in iOS Safari? (I can't test it myself because I need css-file access and can't do it with simple Web Inspector).

Moreover, you can read this: iframe size with CSS on iOS and this: iframe size on iPad

Thanks for the help, used the link you provided and was able to get ios to roughly work. But of course you fix one thing, another one breaks, and so the desktop version became a tiny window. So I have decided to just paste the document directly in to the page instead. Won't be as useful but I can't spend any more time on this issue. — Hguin, May 19 '16 at 19:48
@Hguin or you can try detect device by user-agent and add custom css with necessary fixes. — kpower, May 19 '16 at 21:22

iOS iframe issue

2 Answers2