Att*_*Kun 10 safari iframe scale css3 ipad
我需要扩展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>
这感觉像是一个黑客解决方案，但由于它正在修复看似错误的问题，我认为这并不重要。我没有以 2D 方式缩放，而是以 3D 方式将 iframe 移向查看器，请参阅此演示：http://jsfiddle.net/ianlunn/MSUmS/
将其<body>制作成 3D 空间，如下所示：
body {
-webkit-perspective: 800px;
}
然后 iframe 沿着该 3D 空间中的 Z 轴向查看器移动：
iframe {
-webkit-transform: translateZ(130px);
}
这可能需要针对实际应用程序进行修改，特别是如果 iframe 包装在<body>.
| 归档时间： |
|
| 查看次数： |
3025 次 |
| 最近记录： |