div inside an anchor will break the back transition effect from the target page

div inside an anchor will break the back transition effect from the target page

Hi all,

I started to use jQM for a few days for my mobile web application, and encountered the following issue...

a.html
  1. <html>
  2. <head>...</head>
  3. <body>
  4. <div id="abc" data-role="page>
  5.       <div class="myheader">...</div>
  6.       <a href="b.html">
  7.             <div>abc</div>
  8.       </a>
  9. </div>
  10. </body>
  11. </html>
b.html
  1. <html>
  2. <head>...</head>
  3. <body>
  4. <div data-role="page">
  5.       <a href=href="#" data-rel="back" data-direction="reverse" data-transition="slide">Back</a>
  6. </div>
  7. </body>
  8. </html>

So I suppose when I click the "abc" link in a.html, b.html will be fetched and be added to the DOM with slide transition effect, that's ok and it's work. BUT if I click the "Back" link from b.html, while I suppose a.html will be shown with slide transition effect, the a.html just be shown on the screen without transition effect instead.

I tried to amend a.html as below and it's work as it should be,
a-amend.html
  1. <html>
  2. <head>...</head>
  3. <body>
  4. <div id="abc" data-role="page>
  5.       <div class="myheader">...</div>
  6.       <a href="b.html">
  7.             abc
  8.       </a>
  9. </div>
  10. </body>
  11. </html>

So my observation is that the issue only happen if there is a div inside an anchor...

So far the problem only happen on my Android phone (Nexus One 2.3.3) but not on my Chrome 10 browse (Mac).

Any idea on this? Thanks!