IOS safari：使用 transform3d 时的 iframe 剪辑答案

【问题标题】：IOS safari : clipping of iframe when using transform3dIOS safari：使用 transform3d 时的 iframe 剪辑
【发布时间】：2011-05-28 15:07:22
【问题描述】：

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

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

图像 - 翻译 3d 后（注意剪辑）：

【问题讨论】：

标签： javascript iframe css iphone mobile-webkit

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

花了一段时间，但我想我们终于搞定了：

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

每当您对 i-frame 或其父级使用 CSS 变换时，您还需要将基本的 CSS 变换应用到 i-frame 内容的 body 标签。就是这样。

更新：确保从可见的位置开始！

【讨论】：