How to make iframes scrollbable on iPad (even in GWT)

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!

-webkit-overflow-scrolling: touch;

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:

*:not(html) {
-webkit-transform: translate3d(0, 0, 0);

tl;tr: iPad gets correct iframe scrolling with two lines of CSS.

PS: This is verified on iPad3.

5 thoughts on “How to make iframes scrollbable on iPad (even in GWT)

  1. I do not have a live demo at the moment, but i will try to get one made 😉

  2. diz crap dont work yo. wtf man! ios 6+ is fine, but iframe content gets fooked up on iOS <5.1.1 fooking goozilla!!!