CODEWITHSUNDEEP
htmlioscssiframe
Hguin
Hguin

Reputation: 11

iOS iframe issue

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.

Upvotes: 0

Views: 3756

Answers (2)

JoakimE
JoakimE

Reputation: 1864

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

overflow: auto
-webkit-overflow-scrolling:touch

Upvotes: 2

kpower
kpower

Reputation: 3891

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

Upvotes: 0

Related Questions