Chrome problem - formatting buttons in navbar

Chrome problem - formatting buttons in navbar

Hi all, I wonder if anyone can help me with what's going on here?

Here is a simple page with a navbar that has two buttons and one has a different swatch applied:

  2. <head>
  3. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
  4. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  5. <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
  6. </head>

  8. <body>
  9. <div data-role="footer" data-theme="b">
  10. <div data-role="navbar">
  11. <ul>
  12. <li><a href="#">Button 1</a></li>
  13. <li><a href="#" data-theme="a">Button 2</a></li>
  14. </ul>
  15. </div>
  16. </div>
  17. </body>

Sometimes, Chrome incorrectly formats the second button and just applies swatch B to the whole lot. The behaviour seems to occur as follows:

- In a standard Chrome window, the formatting is correct perhaps 50% of the time - if it's not formatted properly, a page refresh seems to correct it

- In an Icognito window, the formatting is applied correctly every time

- In a chromeless window (from the Tools > Create application shortcuts... feature), it almost never formats correctly - you have to refresh perhaps 20 times before it formats properly

- In Firefox it works without any issues

The fact that it works in Incognito mode makes me think there is some sort of caching issue, but this one has me stumped - any ideas?



Thanks in advance