IOS safari：使用transform3d时剪切iframe

Question

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

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

图片 - 翻译3d后（通知剪辑）：

Answer 1

可悲的是，我没有给你答案，但一般的意见似乎是远离iOS Safari中的IFrame;支持太多了。因此，我将首先考虑使用服务器端代理来处理远程内容，假设您将其锁定为仅受信任的第三方内容。

另请注意iOS 4.2 Safari中3d变换div的明显宽度限制 - 我们发现它的截止值为122,900像素（这个“功能”在iOS 3.2中不存在）

Answer 2

花了一段时间，但我认为我们终于把它钉了出来：

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

  

每当你使用i-frames或它的父亲的CSS变换时，你还需要将基本的CSS变换应用于你的i-frame内容的body标签。就是这样。

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