Pinch to zoom/scale just iframe in Cordova app

Question

I have been battling with this issue for the past couple days and am unable to get to the bottom of it..

I am looking for a way to embed an iframe into a cordova application (running on an iOS device) to show an external webpage and allow the user to pinch to zoom/scale the iframe content without scaling the main app content along with it.

The meta for the cordova view is:

<meta name="viewport" content="initial-scale=1, user-scalable=yes">

The meta for the iframe page I am loading in is:

<meta charset="utf-8">

The iframe I am using to load the content is like so:

<iframe src="" zooming="true" webkitallowfullscreen mozallowfullscreen allowfullscreen width="500" height="500"></iframe>

In the current state, the iframe will be shown with the web page loaded into it, but it doesn't keep the 500 X 500 size as I defined (it forcefully resizes the iframe to the size of the content of the page) and the user can scroll the page to see more of the iframe content, but it cannot be zoomed in or out for the user to see less or more of the iframe.

Is there a tag that I am missing on the cordova index file, or on the iframe itself that will allow for an iOS devices to pinch and zoom the content?

Answer 1

you might have figured this out on your own now, but the reason it's not working is that your iframe document is independent of the top-level dom. Touch events etc registered in the iframe can not bubble up past the barrier of the document they reside in.