UPDATE: I just tried the latest "nightly build" of jQuery mobile... and that solved the problem described below. So, for everybody else who is seeing this: give the latest nightly (currently dated april 16th) a try!
Best regards! - Björn
Here is the original post:
I am developing a web app, and am fairly new to jQuery mobile. While developing, I realized a strange behaviour that seems to be a bug in jQuery mobile - see my example at: Example WebApp. The problem occurs when switching to a different page (which is in the same html file), and then click the "Back" button in the header of that subpage. For example, try to click on "Settings" or "Acknowledgement" at the bottom of that page (ignore all the empty "content" on the rest of the first page - it is just to fill the screen to make the problem occur). When going back, the content of the first page suddenly appears as if it were "scrolled over" the home header (unlike the original layout).
This problem only occurs in Safari and Mobile Safari, not in Firefox. Couldn't yet check other browsers, though - but I suspect it to be specific to Safari.
I had this exact same issue with my test page. I finally worked out that
the framework css is buggy. This does not appear to have been fixed.
The problem is the relative positioning of the elements of the page.
Even though when you press the back button the previous container gets
set to display:none, there are positioned elements that are still taking
up space on the page and thus breaking the page layout. It took me
about 4hrs of head scratching to work it out. You need the hidden divs
to not take up any space on the page when they are hidden. This is what I
added to the css, and it fixed the problem right up: