iPad Safari上的iframe CSS3缩放问题(iOS 5.0.1)

时间:2012-07-19 11:17:05

标签: ipad css3 iframe scale safari

我需要扩展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>

3 个答案:

答案 0 :(得分:3)

这感觉就像一个hacky解决方案但是因为它正在修复看似错误的东西,我认为这无关紧要。我没有在2D中进行缩放,而是将3D中的iframe移向了查看器,请参阅此演示:http://jsfiddle.net/ianlunn/MSUmS/

<body>制作成3D空间,如下所示:

body {
 -webkit-perspective: 800px;
}

然后iframe在该3D空间中沿Z轴向观察者移动:

iframe {
    -webkit-transform: translateZ(130px);
}

这可能需要对现实世界的应用程序进行修改,特别是如果iframe包含在<body>以外的其他内容中。

答案 1 :(得分:0)

可能更容易让iFrame响应,所以如果浏览器调整大小,响应的内容也是如此...这可能会解决它,因为缩放似乎只是缩放框架而不是重新调整内容。

http://jsfiddle.net/D2uBW/

请告诉我与您所寻找的内容有多接近,请对任何想法或修正进行评论。

答案 2 :(得分:0)

你可以在Phonegap Iframe Usage中看到iOS 5上iframe实现的一些错误,即使你没有使用phonegap,也可以找到有用的提示,因为基于HTMS / JS / CSS。我引用该文件的最后一段:

  

在iOS 5及更高版本上使用原生滚动时,iFrame可能会干扰并导致滚动手势被错误地解释。这是Apple实现中的一个错误,唯一的解决方法是避免使用iFrame或使用不同的滚动库(例如iScroll)。

你也试过一个Javascript解决方案我认为可以从父窗口向iframe上的HTML注入CSS文件,因为最后它全部加载到DOM中