Question

It seems jQuery mobile and iframes don't play well.

Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.

Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.

Any solution to this would be greatly appreciated! Thanks!

No correct solution

OTHER TIPS

In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to

<div id="myIframeParentDiv" class="myIframeParentDivClass"> <iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" > <p>Booking Engine error! your browser does not support iframes.</p> </iframe> </div>

STYLES

#myIframeParentDiv{
    height: 100%;
    width: 100%;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top