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.

Simple Apache trick to increase Google Speed Test score

Google Speed Test will (unless set up) complain if you have not set up images to take use of browser caching. To get the browser to start caching static content you can add the following to your Apache vhost file:

ExpiresActive On
ExpiresByType image/gif "access plus 365 days"
ExpiresByType image/jpeg "access plus 365 days"
ExpiresByType image/png "access plus 365 days"
ExpiresByType image/bmp "access plus 365 days"
ExpiresByType image/png "access plus 365 days"
ExpiresByType text/css "access plus 365 days"
ExpiresByType text/x-js "access plus 365 days"
ExpiresByType application/x-javascript "access plus 365 days"

Show/hide a div with javascript

Looking for a simple javascript to show/hide a given text/element?

Here`s all you need! 🙂

<!--
   Simple show/hide system
   @author - Tor Henning Ueland
-->
<script language="javascript" type="text/javascript">

        //ShowHide function - takes the div ID as argument
        function showHide(divId) {

                //Switch the display mode for the the div to hide
                var theDiv = document.getElementById(divId);
                if(theDiv.style.display == 'block')
                        theDiv.style.display = 'none';
                else
                        theDiv.style.display = 'block';

                //Remove this part if you dont want a "show/hide" text
                var showText = document.getElementById("showText");
                var hideText = document.getElementById("hideText");

                //Switch the display mode for the the show/hide text/div
                if(showText.style.display == 'block') {
                        showText.style.display = 'none';
                        hideText.style.display = 'block';
                } else {
                        showText.style.display = 'block';
                        hideText.style.display = 'none';
                }
        }
</script>

<div id="showHideMe" style="display:none;">
        Now you see me!
</div>

<a href="#" onClick="showHide('showHideMe')">
        <div id="showText" style="display:block;">Show</div>
        <div id="hideText" style="display:none;">Hide</div>
</a>