我需要扩展iframe以使其更大(我无法控制iframe内容的源代码).我试图通过-webkit-transform: scale(1.3)CSS属性实现它.
iframe的内容是按比例放大的,但是当我尝试触摸iframe中的任何控件时,似乎触摸事件正在错误的位置被接收(我可以看到控件的"阴影"在触摸错误的地方).因此事件处理程序不起作用(我怀疑它们没有被调用,因为在错误的位置检测到触摸).有人遇到过这个问题吗？可以解决吗？
我创建了一个产生问题的测试用例(在iPad Safari中试用):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>