Overlay scrolling issues on iPhone iPad

Fixed position prevents iOS devices from scrolling the overlay div.

You are probably here because you were coding a website with overlaying divs and you discovered there’s a scrolling problem in iOS.

This happens in the css position property of fixed-size or fixed position div.  At first you will try the 2-finger swipe on your device and notice nothing happening.  Then you try to re-size the screen with the pinch gesture and scroll again. Am I right?  

I looked it up and 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.

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">

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.

Thanks to Rob Been by discovering and posting the method on his blog. Here it is with some brief explanation:

Limiting the range of the scaling in the above meta tag will slightly improve performance.   Using 3 divs 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 🙂