ios - 在 Mobile Safari 上缩放 iframe 会破坏 iframe 的链接

标签 ios css iframe safari

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

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

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

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

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

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

感谢您的帮助!

最佳答案

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

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

Webkit 有 an open bug on transformed iframes .

关于ios - 在 Mobile Safari 上缩放 iframe 会破坏 iframe 的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12725525/

相关文章:

ios - 在模拟器中注销 Appstore

objective-c - 构造一个以 nil 结尾的 NSString 列表作为 NSString *

css - 使用纯 css 隐藏字符串中的最后一个字符

authentication - 如何以编程方式关闭谷歌一键登录 iframe?

ios - 如何设置 Tableview 单元格的 alpha 值

ios - 如何使用 MonoTouch 有效地呈现伪 HTML?

css - IE 中真正令人沮丧的 CSS 降压

css - flex 元素的 `display` 属性的允许值是多少? ( flex 元素的 child 的布局无关紧要)

c# - 从 iFrame 内的 UpdatePanel 调用父页面 javascript

javascript - 在 iframe 中打开链接