CODEWITHSUNDEEP
iframescrolloverflowviewport
Taylor Jasko
Taylor Jasko

Reputation: 200

Iframe issues on iOS when not in viewport when overflow is scroll

Per this blog post here (http://www.david-lewis.com/css/css-that-can-affect-performance-on-ipad-web-apps-or-phonegap/), there is a bug in iOS 5 that I have no idea on how to get around.

Essentially like the title says, if you have a section of your site that is scrolls (I'm using the new -webkit-overflow-scrolling), and if there is an iframe out of the viewport, it will not load it.

The blog post linked above says the following:

iFrames

What is it: Using iFrames in overflow:scroll elements to show things like videos or maps
What’s the symptom: If you have an iframe that is outside of the viewport in an overflow: scroll element (especially when using -webkit-overflow-scrolling: touch) then it will not render as you scroll to it
What’s the cure: no idea, please send me the answer

Does anyone know how to fix this? I've been looking all over the web for a cure, but it is no luck. It seems to be that if you click on the iframe, it will show it after the click.

This in my mind is a huge issue for people developing web-apps. Does anyone know of a fix?

Upvotes: 2

Views: 1107

Answers (1)

Taylor Jasko
Taylor Jasko

Reputation: 200

Well, I hate leaving this as an official "answer", but as of time of posting, there is no fix...

I'd assume if you'd use JavaScript to extract the HTML from the iframe, put the code in the same spot, and somehow get the CSS to work with it too, it would work. But darn, that would be too much work to do on such a slow device like an iPhone.

Upvotes: 1

Related Questions