IFRAME CSS3 zoom problem on iPad Safari (iOS 5.0.1)

 
 

  



 
Parent

 

 < br />


 
Child

 
 Button

body {
 -webkit-perspective : 800px;
}

iframe {
 -webkit-transform: translateZ(130px);
)

I need to extend an iframe to make it bigger (I can’t control the source code of the iframe content). I tried to achieve it through the -webkit-transform:scale(1.3) CSS property.

The content of the iframe is enlarged correctly, but when I try to touch any control in the iframe, it seems that the touch event is received in the wrong place (I can see the “shadow” of the control is touched in the wrong place) As a result, the event handlers are not working (I suspect they are not called because the touch was detected in the wrong place). Has anyone encountered this problem? Can it be solved?

I created a test case that caused the problem (try it in iPad Safari): http://jsfiddle.net/9vem2/

In a more readable format Source:

Parent page (iframe container):

 
 

  



 
Parent

 

Child page( iframe content):

 < br />


 
Child

 
 Button

This feels like a hack’s solution, but since it is being fixed it seems to be a bug, I guess it doesn’t matter. Instead of zooming in 2D, I have moved the iframe into 3D, towards the viewer, Please refer to this demo: http://jsfiddle.net/ianlunn/MSUmS/

< body> is made into a 3D space, like this:

bo dy {
 -webkit-perspective: 800px;
}

Then, the iframe moves along the Z axis in the 3D space for the observer:

iframe {
 -webkit-transform: translateZ(130px);
}

This may require modifications to the real world application, especially if the iframe contains In