Menu
I need to scale up an iframe to make it bigger (I have no control over the source code of the iframe's content). I'm trying to achieve it via the -webkit-transform: scale(1.3) CSS property.
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?
I've created a test case that produces the problem (try it in iPad Safari): http://jsfiddle.net/9vem2/
Source in a more readable format:
Parent page (the container of the iframe):
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<style type="text/css">
iframe
{
left: 200px;
-webkit-transform: scale(1.3);
}
</style>
</head>
<body>
<h2>Parent</h2>
<iframe src="child.html"></iframe>
</body>
</html>
Child page (iframe content):
<!DOCTYPE html>
<html>
<head>
<title>Child</title>
</head>
<body>
<h2>Child</h2>
<input type="text"></input>
<button onclick="alert('hello');">Button</button>
</body>
</html>
222
This feels like a hacky solution but as it's fixing what appears to be a bug, I suppose it doesn't matter. Rather than scaling in 2D, I have moved the iframe in 3D, toward the viewer, see this demo: http://jsfiddle.net/ianlunn/MSUmS/
The <body> is made into a 3D space, like so:
body {
-webkit-perspective: 800px;
}
Then the iframe is moved toward the viewer along the Z axis in that 3D space:
iframe {
-webkit-transform: translateZ(130px);
}
This may need modification for a real-world application, especially if the iframe is wrapped in something other than the <body>.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
