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: ```

``` form.html: ```

Accepted Answer

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.

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

Solution

Problem