Changing pages in jQuery Mobile causes strange formatting issues

I have a single page jQuery mobile application that consists of several list views which I populate dynamically. Whenever I first visit a page they are loaded properly and all the formatting looks great, though if I navigate to another page then return to it, the page will have everything 'push' upward by about 50%.

This problem only happens when I click on a link similar to something like

<a href="#mypagewithlist">something</a>

instead of pressing the back button (which shouldn't cause a page() call).

Here is an example of what some of the pages would be:

<div data-role="page" id="pagewithlist">
    <div data-role="content">
        <ul data-role="listview" id="mylistview"> </ul>
        <!-- I use jQuery Templates to populate the above list -->
    </div>
</div>
<div data-role="page" id="pagewithlink">
    <div data-role="content">
        <a data-role="button" href="#pagewithlist">Go to page with list</a>
    </div>
</div>

At the first load of the page I pull in data from an API and then use that data to populate the empty list with jQuery templates.

Any ideas how to work around this issue?

What is the data-url of your original page (the one you're returning to using the link)? Have you tried assigning an id to that page (div) and changing the link to <a href="#mypagewithlist">something</a>? If the link and the page's data-url don't match, jQM fetches the original page again and it is then loaded twice in the DOM, which might cause problems.

Have you tried updating the list when you go back to the page? i.e. :

$('ul').listview('refresh');