Overlay scrolling issues on iPhone iPad

Fixed position prevents iOS devices from scrolling the overlay div.

If you haven’t experienced this, then you will find out whenever you have to code a website with overlaying divs in either a fixed-size or fixed position.  At first you will try the 2-finger swipe on your device and notice no change in scrolling.  Then you might try to re-size the screen with the pinch gesture and scroll again.  So this has been a known issue in Safari caused by Apple not wanting duplicate scroll bars to complicate the simplified user-interface. I don’t remember the credit reference for this, but will post it when I find it.

So after spending hours trying different javascript plug-ins, none of them really worked in my specific project which is a fixed size div in a relative position.  Then a fixed size matching the same div sliding on top with additional content.

You may run into iScroll http://cubiq.org/iscroll-4 searching for a solution but I think it is too much.  In fact, there is a much simpler solution even though I think iScroll is great for simulating iOS’ interface on different browsers.  Search results exceed one page for this scrolling issue – unbelievable!  

Enough rambling and onto the solution.  Relieve yourself of frustration and believe all it takes is some new CSS code!  Thanks to Rob Been by discovering and posting the method on his blog. Here it is with some brief explanation:

First consider using HTML5 and the meta tags for mobile.

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=1, minimum-scale=0.5, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">

Limiting the range of the scaling in the above meta tag will slightly improve performance.   Using 3 DICS you have the #container DIV with a z-index:0 and a fixed size.  Then #overlay will be on top with the same dimensions in the absolute position and a higher z-index: 1 and the 3rd DIV with the #subcontent.

#container {
	display: block;
	position: relative;
	margin: 0 auto;
	width: 500px;
	background-color: #000;
	z-index: 0;
}

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 auto;
    width: 500px;
    height: 400px;
    background-color: #000;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

#subcontent {

        position: relative;
	line-height: 1.5em;
	-webkit-transform: translateZ(0);

}

The lines containing -webkit- are the key to make the scrolling work in Safari.  In the #overlay DIV you need overflow-y: scroll and -webkit-overflow-scrolling: touch to force the scrolling.  In #subcontent you need -webkit-transform: tranzlateZ(0); to move the actual html content up and down, other wise the DIV will scroll but the overflowing content will NOT show.  What a relief to have 3 lines of code that makes it possible to scroll instead of using javascript