Hacer zoom en Iframe provoca la posición incorrecta del cursor en la aplicación Cordova iOS

Question

Estoy usando Cordova para el desarrollo de iOS.Utilizo un iframe para abrir un enlace externo en mi aplicación.El tamaño de la página externa es grande y para que quepa en la pantalla estoy usando la propiedad de escala -webkit-transform.Todo está bien y encaja en la pantalla.Pero el problema es que cuando selecciono una entrada de texto, el cursor de entrada (cuadro) comienza a parpadear en algún lugar debajo del campo de texto.

---

Por favor vea el código:

índice.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>

formulario.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>

y JS es:

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

Este era un viejo problema al que también me enfrentaba yo.He buscado en mi código de hace dos años la solución a este problema y aquí está la solución.

En lugar de utilizar el iframe para abrir el enlace externo, que estaría incrustado en otra página, había usado el inAppBrowser para esto para abrir un enlace externo.

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

Ahora que 'EnableViewPortScale=sí' opción hacer.Esta establecido el browserOptions.enableviewportscale a true en CDVInAppBrowser.m que fue usado en openInInAppBrowser método en la misma clase para UIWebView options .es decir;

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

significa que la línea anterior se reemplaza por;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView en realidad tiene una propiedad scalesPageToFit que ajusta la página al ancho del dispositivo considerando la relación de aspecto.