在 Mobile Safari 上缩放 iframe 会破坏 iframe 的链接答案

【问题标题】：Scaling an iframe on Mobile Safari is breaking the iframe's links在 Mobile Safari 上缩放 iframe 会破坏 iframe 的链接
【发布时间】：2012-09-25 09:16:25
【问题描述】：

我在 Mobile Safari 的 iframe 上使用 CCS3 转换时遇到问题。如果我在 iframe 上使用 -webkit-transform: scale();，则 iframe 的内容会相应缩放，但 iframe 中的链接会中断。

点击元素会突出显示 hitbox，并且链接 hitboxes 似乎没有被缩放。当您点击一个链接时，您会看到如果 iframe 没有被缩放，那么点击框会出现在链接所在的位置。

链接距离左上角越远，无论您在哪里设置变换原点，情况都会变得更糟。

我正在测试的同一页面在我的计算机上的 Safari 和 Chrome 上完美运行，所以我怀疑这是一个移动 Safari 错误。

这是一个已知问题吗？有人知道解决方法吗？我尝试使用 zoom 属性，但它只调整 iframe 的大小，而不是它的内容。

我在这里上传了一个示例：http://trrrm.com/iframe/ 如果您在 iOS 设备上打开它并单击 iframe 中的链接，您就会明白我的意思。

感谢您的帮助！

【问题讨论】：

这有用吗？ stackoverflow.com/questions/14175464/…
嗨 terrarum 你有没有找到答案？我遇到了完全相同的问题。
感谢 Carol 和 Claes 的 cmets，我才看到他们，我想我没有设置电子邮件通知之类的！我不记得我们最后做了什么，但我猜 Claes 现在可能也不在乎了 :)

标签： ios css iframe safari

【解决方案1】：

这是一个已知问题。缩放 iframe 上的触摸事件在 iOS 上无法正常工作。如果您正在创建 iFrame 的内容，则可以改为缩放内容正文元素。

请注意，即使是动画翻译也会在 iOS6 上引起问题 - 我必须在动画完成后通过将 iframe 的顶部更改 1px 来强制重新布局，以使触摸事件正常工作。

Webkit 有an open bug on transformed iframes。

【讨论】：