Zooming in Iframe effecting the wrong cursor position in cordova iOS application

Question

I am using Cordova for ios development. I use an iframe to open an external link in my app. The external page size is large and in order to fit into the screen I am using -webkit-transform scale property. Everything is fine and it fits into the screen. But the problem is that when I select a text input, the input cursor (caret) starts blinking somewhere below the text field.

---

Please see the code:

index.html:

<div data-role="page" id="personDetailPage">
        <div data-role="header" class="header" >
            <div class="logo"  id="mainScreenLogo"> <img src="" id="headerLogoImg" /> </div>
            <h1 id="personDetailTitle"class="tittle">Person Detail</h1>
            <a href="#main" class="ui-btn-right headerHomeIcon"  data-transition="slide" onclick="formHomeButtonClick();"> <img src="homeIcon.png" class="headerHomeImg" /> </a>    
        </div>
        <div id="iFrameDiv" scrolling="no"> 
            <iframe id="formframe" width="280" height="150" src="form.html" onLoad='fixiFrame();' frameborder="0" ></iframe>  
        </div>

    </div>

form.html:

<div data-role="page" id="personRegistration" scrolling="no"><br>
        Please Enter the Person Details
        <form id="registrationForm" method="POST" action="https://abe.com/Registration.aspx" onsubmit="return checkform();" >
            <div data-role="fieldcontain" class="ui-hide-label">
                <input type="text" name="name" id="name" value="" placeholder="Name" />
            </div>
            <div data-role="fieldcontain" class="ui-hide-label">                <input type="text" name="email" id="email" value="" placeholder="Email" />
            </div>

            <a href="" id="my-custom-button-registration" data-role="button" data-transition="fade" onclick="return checkform();">Continue</a>
        </form> 
    </div>

and JS is:

function fixiFrame() { // set the size of IFrame to the device screen fit
    $("#formframe").width( viewport.width  );
    $("#formframe").height( viewport.height -35- deviceVarient );
}

function resizeIframe(){  //zoom the person registration Iframe upto screen fit it will be called when device ready
    var xaix = viewport.width /widthFactor; // widthFactor is the actual page sixe of external page i.e; abc.com/Registration.aspx
    var yaix = (viewport.height-35- $(".logo").height() ) /heightFactor;
    $('#formframe').css('-webkit-transform', 'scale('+xaix+','+yaix+')');
  $('#formframe').css('-webkit-transform-origin', '0 0');


    //alert('resizeIframe(): xaix = '+xaix+' yaix = '+yaix+' $(.logo).height() = '+$(".logo").height()); //for testing & debugging
}

Answer 1

This was an old problem that was also faced by me. I have looked into my two year old code for the solution of this problem and here is the solution.

Instead of using the iframe for opening the external link, that would be embedded in another page, I had used the inAppBrowser for this for opening external link.

window.open( encodeURI('externalPage.html') , '_blank', 'location=no','EnableViewPortScale=yes');

Now, what 'EnableViewPortScale=yes' option do. Its set the browserOptions.enableviewportscale to true in CDVInAppBrowser.m that was used in openInInAppBrowser method in same class for UIWebView options . i.e;

self.inAppBrowserViewController.webView.scalesPageToFit = browserOptions.enableviewportscale;

it means the above line is replace to;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView is actually have a property scalesPageToFit that fits the page to the device width considering the aspect ratio.