I have some strange scrolling problems with my PhoneGap (using jQuery Mobile) app:
I’m using a header and footer in my page. In between there is the content I want to display.
Because there is also a background image I’m using a container with white background color that the text in it is better readable. This container is positioned like this:
position:absolute;
top: 77px; /*header height*/
bottom: 54px; /*footer height*/
left:10px;
right:10px;
overflow: auto;
This works perfect when I test the page with FireFox, but it just does not work at the phone.
Anyone knows why?
edit: Sorry… it was tested with Android before, there is does not work. On iPhone it’s working!
Android in the version 1-3 interpret every overflow as overflow:hidden, so you cannot use overflow:scroll and have to use JavaScript-scrolling (http://www.androidannoyances.com/post/51)