I have a problem with a mobile website I am building, and after extensive research I cannot find other instances of the same problem.
The problem does not occur when running the app in mobile Safari. It only is a problem when I save to home screen an run that way.
The problem is as follows:
Using a normal list with links in the form of:
<ul data-role="listview">
<li>
<a href="example/example.php" data-transition="slide" data-prefetch="true">Example</a>
</li>
</ul>
When I click on the link, the linked page immediately appears for a split second, and then slides into view, so in effect the transition isn't happening until after the page change.
Prefectching the data is a solution I tried, as shown above, but the problem existed before that. I have tried data-rel="external" or not, and the behavior is the same. It doesn't matter what transition I use, the result is the same.
-webkit-backspace-visibility:hidden
hack didn't work, nor did several others that I now cannot remember.
The only solution I have found to the problem - and it is definitely not satisfying - is to set the linked page to have the css
#id_of_linked_page {opacity:0;}
..and then bind a fadeIn fast function to the $.mobile.pageshow event, and though, it actually looks surprisingly clean given the hackishness of it, it doesn't produce the desired effect, and is not seamless.
Any ideas?
Thanks
p.s. I am running this with IOS 5.1 on the IPhone 4s (not jailbroken)
