2

人们已经找到了一种使用 css 转换在 ios 设备上使div可滚动的方法。我在 IOS safari 上遇到了 iframe 的问题,如果我尝试使用 css3 转换来滚动 iframe 中的内容,则生成的内容将被剪辑为首先在屏幕上呈现的内容。这适用于 android 设备,适用于 IOS 上的DIV,但不适用于 iframe。这似乎是 safari webkit 实现中的一个错误。我尝试将 iframe 的高度增加到大于其中包含的内容,并确保 iframe 上启用了溢出。

有没有人能够想出一个解决方法?由于我绝对需要远程内容的 iframe,我最后的手段是通过服务器端页面代理内容,并注入一些 javascript 以便在孩子的 body 标签上执行 translate3d:这似乎有效。

图像 - 翻译 3d 后(注意剪辑):

http://imgur.com/seFqv.png

4

2 回答 2

1

遗憾的是,我没有给你答案,但普遍的看法似乎是远离 iOS Safari 中的 IFrame;支持太麻烦了。因此,假设您将其锁定为仅受信任的第三方内容,我将支持为您的远程内容使用服务器端代理的方法。

还要注意 iOS 4.2 Safari 中 3d 转换 div 的明显宽度限制 - 我们发现它在 122,900 像素处被截断(此“功能”在 iOS 3.2 中不存在)

于 2011-01-21T15:04:42.533 回答
1

花了一段时间,但我想我们终于搞定了:

引用自http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/

每当您将 CSS 转换与 i-frame 或其父级一起使用时,您还需要将基本的 CSS 转换应用于 i-frame 内容的 body 标签。而已。

更新:确保你从一个可见的位置开始!

于 2012-04-02T22:59:48.717 回答