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?