Android browser (4.n.n) and popup image does not work with styled glyph icon

Android browser (4.n.n) and popup image does not work with styled glyph icon

The <a> tag is a styled FontAwesome glyph :

  1. <a href="#pu-li0" data-rel="popup" data-position-to="window" data-transition="slidedown" class="pix"></a>
  2. <div data-role="popup" data-theme="b" data-overlay-theme="b" data-shadow="false" id="pu-li0">
  3. <!-- Nothing to see here. Please move along. -->
  4. <img class="pu-img" src="../images/image0.jpg" alt="pu-li0">
  5. </div>
  1. .pix:after {padding-left:1.5em; content:"\e800"; font-family:fontawesome; line-height:.75em; color:dimgrey;}
iOS, Chrome/Android and all desktops do work.

Replacing the styled glyph with a <button> tag does work -

  1. <a href="#pu-li0" data-rel="popup" data-position-to="window" data-
  2. transition="slidedown"><button>pu-li0</button></a>

I am asking for confirmation that this is a recreatable issue before opening a bug report (against Android?!?)

Even more curious, using the JQM built-in icons the overlay (background) now appears but not the popup image.  If the device is ROTATED the image appears and remains displayed after a counter-rotation until dismissed (tapped away).

  1. <a href="#pu-li0" data-rel="popup" data-position-to="window" data-transition="slidedown" data-iconpos="notext" data-role="button" data-icon="camera" data-inline="true" style="margin:0 0 0 0;"> </a>
  2. <div data-role =" popup " data-theme =" b " data-overlay-theme =" b " data-shadow =" false " id =" pu-li0 ">
  3. <!-- Nothing to see here. Please move along. -->
  4. <img class =" pu-img " src =" ../images/image0.jpg ">
  5. </div>

And JFTHOI the JQM glyph was replaced with an image... with an identical outcome.

Has anyone seen this (reluctant) behaviour, which appears to be a JS or / and load triggering matter.