我需要放大 iframe 以使其更大（我无法控制 iframe 内容的源代码）。我正在尝试通过以下方式实现它-webkit-transform: scale(1.3)CSS 属性。
iframe 的内容已正确放大，但是当我尝试触摸 iframe 中的任何控件时，似乎在错误的位置接收到触摸事件（我可以看到控件的“阴影”在触摸错误的地方）。因此事件处理程序不起作用（我怀疑它们没有被调用，因为在错误的位置检测到触摸）。有人遇到过这个问题吗？能解决吗？
我创建了一个产生问题的测试用例（在 iPad Safari 中尝试）：http://jsfiddle.net/9vem2/ http://jsfiddle.net/9vem2/
源代码采用更易读的格式：
父页面（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内容）：
<!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/ http://jsfiddle.net/ianlunn/MSUmS/
The <body>被制作成 3D 空间，如下所示：
body {
-webkit-perspective: 800px;
}
然后 iframe 沿着该 3D 空间中的 Z 轴向查看器移动：
iframe {
-webkit-transform: translateZ(130px);
}
这可能需要针对实际应用程序进行修改，特别是当 iframe 被包装在除 iframe 之外的其他内容中时<body>.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
