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">
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.
margin: 0 auto;