Here is the big question ?

The iframe’s content is scaled up correctly, but when I try to touch any of the controls in the iframe, then it seems that the touch event is being received at the wrong location (I can see that the control’s “shadow” is highlighted at the wrong place upon touch). Therefore event handlers are not working (I suspect they aren’t getting called, because the touch is detected at the wrong place). Has anybody encountered this issue? Can it be resolved?

If you google it you will find lots of suggestion in stackoverflow and other forum. But unfortunately none will work. Below solution may help.

Instead of applying scaling to Iframe you can scale the entire page by meta tag and apply zoom non-iframe area.

Scaling by Meta Tag

var viewport_scale = 0.25; // scaling value as required
var content_width = 800; // carefully set this width

A.one(‘#viewport’).set(‘content’, “user-scalable=yes, width=”+ content_width +”, minimum-scale=0, maximum-scale=5.0, initial-scale=”+viewport_scale);

Zooming Other Elements
A.one(‘#nonIFrameElements’).setStyle(‘zoom’,’2.5′);

These fixes are only for IOS device so use below checks.
var isDevice = navigator.userAgent.match(/(iPhone)|(iPod)|(iPad)/i);
var isMobile = navigator.userAgent.match(/(iPhone)|(iPod)/i);
var isPad = navigator.userAgent.match(/(iPad)/i);

Note : You have to do bit of tricky work in between to make this work as per you need.