IOS safari : clipping of iframe when using transform3d

People have found a means by which to make a div scrollable on ios devices using css transforms. I have an issue with iframes on IOS safari, whereby if i try and use css3 transforms to scroll content in an iframe, the resulting content is clipped to what was rendered first on the screen. This works fine on android devices, and works on DIVs on IOS, but NOT iframes. This appears to be a bug in the safari webki开发者_高级运维t implementation. I've tried increasing the height of the iframe to larger than the content contained within, and ensured overflow is enabled on the iframe.

Has anyone been able to come up with a workaround? As i'm absolutely in-need of an iframe for remote content, my last resort would be to proxy content through a server sided page, and inject some javascript in order to perform a translate3d on the child's body tag: this seems to work.

Images - after translate 3d (notice clipping) :

---

Sadly I don't have an answer for you, but the general opinion seems to be to stay away from IFrames in iOS Safari; the support is just too buggy. I would thus second the approach of using a server side proxy for your remote content, assuming you lock it down to only trusted third party content.

Also be aware of an apparent width limitation on 3d transformed divs in iOS 4.2 Safari - we found it cut off at 122,900 pixels (this "feature" was not present in iOS 3.2)

---

It took a while but I think we finally nailed it:

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

Whenever you use CSS transform with i-frames or it’s parents you also need to apply a basic CSS transform to the body tag of your i-frame content. That’s it.

UPDATE: Make sure you start from a visible position!