I want to have a web site appear on an iphone with an iframe that takes up 1/3rd of the height of the screen, and 100% of the width. Inside this iframe i want to have a very wide page for the user to flick scroll through, but when that is scrolled i don’t want it to affect the rest of the page outside the iframe.
I’ve done this with some simple html that works fine on the desktop in all browsers by setting the iframe’s width to 100%, however on the iphone it forces the entire page to the width of the iframe’s contents, and scrolling of the iframe contents is not independent of scrolling of the rest of the page.
Can anyone suggest why? I have a suspicion that iframe contents are inlined on the iphone to save ram…
The iPhone Safari browser uses HTML 5, which doesn’t specify required support for scrolling iFrames. I’ve seen several other users with the same problem, but I’m afraid it won’t happen inside of the iFrame element.
You can also check out the JQTouch JavaScript library, some users have found success with their tools.:
http://groups.google.com/group/jqtouch/browse_thread/thread/23fdfd81ed7cd004?pli=1
http://www.w3schools.com/html5/tag_iframe.asp