I am currently working on a GWT app that some places uses iframes. When i tested this on a iPad, i noticed that it was not possible to scroll the contents, even with the two fingers swipe trick.
This required a lot of testing, googling, failing and then some more testing.
Somebody solved this by setting parent elements of the iframe, to the iframe`s size, this did not give the wanted behavior. But what i did notice was that there was a lot of pointing towards the CSS rule: “-webkit-overflow-scrolling”. I tried this too, but it did not “just work”.
After some testing, i made it work when i added the CSS rule for almost all parent elements for that iframe. With the 3 parents of the iframe corrected, the ipad started working as expected. Yay!
But then, i got to the next problem. All the HTML elements that were hidden because of overflow, started disappearing, shrinking, getting cut in half, and other “fancy stuff”.
Luckily, there is a CSS fix for that too:
-webkit-transform: translate3d(0, 0, 0);
tl;tr: iPad gets correct iframe scrolling with two lines of CSS.
PS: This is verified on iPad3.