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

【问题标题】：iframe CSS3 scaling issue on iPad Safari (iOS 5.0.1)iPad Safari (iOS 5.0.1) 上的 iframe CSS3 缩放问题
【发布时间】：2012-07-18 13:41:18
【问题描述】：

我需要放大 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>

【问题讨论】：

嗨 kahoon，你解决过这个问题吗？我现在正在调查这个。如果你解决了，你能更新答案吗？
@djburdick：我还没有解决这个特殊的场景。我不得不求助于将缩放 CSS 代码放入 iframe 的内容中（必须与第 3 方协商）。如果您无法修改 iframe 的源代码，这当然对您没有帮助。

标签： ipad css iframe scale safari

【解决方案1】：

这感觉像是一个 hacky 解决方案，但由于它正在修复似乎是错误的问题，我想这并不重要。我没有在 2D 中缩放，而是将 iframe 在 3D 中移向查看器，请参阅此演示：http://jsfiddle.net/ianlunn/MSUmS/

<body> 被制作成 3D 空间，如下所示：

body {
 -webkit-perspective: 800px;
}

然后 iframe 在该 3D 空间中沿 Z 轴向查看器移动：

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

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

【讨论】：

不幸的是，当我尝试水平放置 iframe 时，此解决方案会产生与我原来的帖子中相同的问题。我也尝试过设置 margin-left 和 translateX。
您的帖子没有提到水平放置 iframe。您能否提供更新后的演示并说明您想要实现的目标？
不确定为什么会收到赞成票。即使在 iOS7 上也无法解决问题：jsfiddle.net/1e7p6kk9/2

【解决方案2】：

让 iFrame 响应式可能更容易，因此如果浏览器调整大小，响应式内容也会随之调整...这可能会解决此问题，因为缩放似乎只是缩放框架而不是重新调整其中的内容。

http://jsfiddle.net/D2uBW/

让我知道我与您正在寻找的内容有多接近，如有任何想法或修复，请发表评论。

【讨论】：

【解决方案3】：

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

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

您还尝试过我认为可以从父窗口将 CSS 文件注入 iframe 上的 HTML 的 Javascript 解决方案，因为最后它全部加载到 DOM 中

【讨论】：