Still no way to scroll iframes?

Question

sjordi Author

Level 1

128 points

Still no way to scroll iframes?

Hi,

I need to embed a WordPress blog into my website

But the iPad, which is the target doesn't allow scrolling within the blog, since it's an iFrame or object.

No, two fingers or one finger doesn't scroll the content within an iFrame or object placeholder.

C'mon, why the **** is this impossible?
Anyone with any luck in embeding WordPress into an iFrame that works on the iPad.

Adding a div with

-webkit-overflow-scrolling:touch andoverflow:scroll or auto

doesn't help.

The wordpress address is in the same domain as the page wanting to embed it.

Using iScroll 4 doesn't help.

WPTouch Pro doesn't help.

I can't believe that there is no way to do this. Otherwise it admitting that the iPad can't be

a professional tool.

Any clue?

iPad, iOS 5.0.1

Posted on Feb 21, 2012 1:51 AM

Reply

Answer 1

iamjeremie

Level 4

1,310 points

Feb 21, 2012 2:48 AM in response to sjordi

Hi

First of all, we're just fellow users here so even if you are annoyed, we aren't responsible for that...

Second, you say that you "need". Are you sure you really need to embed it? I create websites for a living and the case where you need to embed a page in another is really really rare.

Third, have you tried looking at the HTML 5 attributes of the iframe?

Fourth, I have tried to create an iframe for testing purpose, to try solutions shown on the Internet. Personally I never have to scroll. The iPad modifies the height of the frame so that it can display the entire page. Do you have the same thing? Is that the problem?

Reply

Answer 2

sjordi Author

Level 1

128 points

Feb 21, 2012 5:00 AM in response to iamjeremie

Hi Jeremie,

1- I know you're not responsible in the forums.

Just asking the community facing the same problem

2- Yes I need to embed it. Because the website is entirely autonomous and not designed in WordPress. There is one page embeding a blog, which is written in WordPress, the only tool that the customer knows how to use.

The WordPress blog is stipped down to the blog content itself, without any decorations, headers, footers, etc. I just need to encapsulate the blog contente into the web page.

3- Yes, iframe attributes are ignored by iOS 5 supposedly to sandbox the outside website, for security reasons. It's supposed to work if the iframe points to the same domain, which is the case here.

Even if you replace the iframe by an "<object data="...>" it behaves the same way.

4- yes I tried. No matter what external tools trying to find a workaround I us, whatever ui-kit variable you add, it's impossible to scroll within the iframe. Or when it is possible, then the iframe scrolls but the content doesn't update.

I'm not the only one with that problem.

Thanks anyway.

Reply

Answer 3

Apr 23, 2012 8:27 AM in response to sjordi

This is a signficant issue for everyone using Google Docs as the source for data arriving on a webpage, where the data exceeds the screensize, and therefore scrolling is required.

The only mechanism Google provides for linking a Docs to a webpage is via iframe.

We have large spreadsheets feeding into our historical research site and now these cannot be scrolled at all

http://aircrewremembrancesociety.com/Kracker/LuftwaffeGermanPilotsE.html

Previously this worked just fine on iPhone and iPad but now with iOS5, 2 finger scrolling - or indeed any finger scrolling - has broken.

(I also note that on iPhone the <divs> used to generate the header are not now working correctly, but that's another issue I can hopefully figure out).

We chose to use Google Docs as we have researchers all over the world and we need to have a mechanism whereby all can input their data and have it go live without the intervention of a webmaster.

Reply

Answer 4

Sep 26, 2012 10:22 PM in response to steftheref

User csdco (https://github.com/fancyapps/fancyBox/issues/2#issuecomment-5997068) has provided a simple answer that solved the issue for me.

-----------------------------------

It's much easier to control overflowed divs than it is iframes, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn't even able to get the 2 finger scrolling to work (in iframes).

It goes something like this:

a-file.html:

<html>

<body>

...

</div>

</body>

</html>

Reply