jQuery Mobile - Breaks form entry (in iframes) on iOS

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!

Answer 1

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;
}