iPad上的Safari浏览器(iOS版5.0.1)的iframe CSS3规模问题(iframe

2019-09-19 19:04发布

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

Answer 1:

这感觉就像一个哈克解决方案,但因为它是固定这似乎是一个错误,我想这并不重要。 而非2D缩放,我提出在3D的iframe,朝向观察者,看到这个演示: http://jsfiddle.net/ianlunn/MSUmS/

所述<body>被制成一个三维空间,如下所示:

body {
 -webkit-perspective: 800px;
}

然后的IFRAME移向沿着在3D空间中的Z轴的观看者:

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

这可能需要修改为一个现实世界的应用中,特别是如果在iframe被包裹在比其它东西<body>



Answer 2:

什么可能更容易被制造的iFrame响应,所以如果浏览器调整大小,那么,这是响应......由于规模似乎只是缩放框架内未重新调整内容,这可能修复它的内容。

http://jsfiddle.net/D2uBW/

让我知道我对你在找什么如何关闭和请与任何想法或修复发表评论。



Answer 3:

该是对iOS 5的iframe中实现的一些bug,你可以在看的PhoneGap的Iframe使用 ,即使你不使用PhoneGap的,你可以找到有用的提示,因为是基于HTMS / JS / CSS。 我举该文件的最后一段:

当使用在iOS 5及以上天然滚动,iFrame中可潜在地干扰和导致被错误地解释滚动手势。 这是苹果公司的执行中的错误,唯一的解决方法是避免使用iFrame或使用不同的滚动库(如iScroll)。

另外你尝试过一个Javascript的解决方案,我认为是更多钞票,以CSS文件注入到从父窗口的iframe的HTML,因为最终这一切都在DOM加载



文章来源: iframe CSS3 scaling issue on iPad Safari (iOS 5.0.1)