iPad Safari上的iframe CSS3缩放问题（iOS 5.0.1） [英] iframe CSS3 scaling issue on iPad Safari (iOS 5.0.1)
问题描述
我需要扩大一个iframe，使其更大（我无法控制iframe的内容的源代码）。我试图通过 -webkit-transform：scale（1.3） CSS属性实现它。
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.
iframe的内容被正确地放大，但是当我尝试触摸iframe中的任何控件，则似乎触摸事件是在错误的位置被接收（我可以看到控件的阴影被突出显示在错误触摸位置）。因此事件处理程序不工作（我怀疑他们没有被调用，因为触摸检测到错误的地方）。有人遇到这个问题吗？可以解决吗？
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?
我创建了一个产生问题的测试用例（在iPad Safari中试用）： http://jsfiddle.net/9vem2/
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:
父页面（iframe的容器）：
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>
子页（iframe内容）：
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>
推荐答案
这个感觉像一个黑客的解决方案，似乎是一个错误，我想这没关系。我不是在2D中缩放，而是将3D框架中的iframe移动到查看器，请参阅此演示： http：// jsfiddle.net/ianlunn/MSUmS/
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/
< body> 被制成3D空格，像这样：
The <body> is made into a 3D space, like so:
body {
-webkit-perspective: 800px;
}
然后iframe在3D空间中沿着Z轴移动到查看器：
Then the iframe is moved toward the viewer along the Z axis in that 3D space:
iframe {
-webkit-transform: translateZ(130px);
}
这可能需要修改现实世界的应用程序，尤其是iframe包裹在除< body> 之外的其他东西。
This may need modification for a real-world application, especially if the iframe is wrapped in something other than the <body>.
这篇关于iPad Safari上的iframe CSS3缩放问题（iOS 5.0.1）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
