Page transition problem

Page transition problem

I have sweated my head off, but can not figure this out.

I have very simple jqm test page,  http://veikkola-weather.com/mobile_test.html 

Sometimes page transitions work, most of the time not. What is the remedy here? It worked some weeks/days ago, problems started recently.

I have tested Android, Chrome, Safari, WP7.X, all the same behaviour.

-Timo

--------------code------
<!DOCTYPE html>
<html> 
<head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body> 

<div data-role="page" id="1">

<div data-role="header">
<h1>My Title</h1>
<div data-role="navbar">
<ul>
<li><a href="#1" class="ui-btn-active ui-state-persist">1</a></li>
<li><a href="#2">2</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->

<div data-role="content">
<p>Hello world and <a href="#2">link to 2</a></</p>
</div><!-- /content -->

</div><!-- /page -->

<div data-role="page" id="2">

<div data-role="header 2">
<h1>My Title 2</h1>
<div data-role="navbar">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2" class="ui-btn-active ui-state-persist">2</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->

<div data-role="content">
<p>Hello world 2</p>
</div><!-- /content -->

</div><!-- /page -->
</body>
</html>
------------code ends---------