Android browser (4.n.n) and popup image does not work with styled glyph icon
The <a> tag is a styled FontAwesome glyph :
- <a href="#pu-li0" data-rel="popup" data-position-to="window" data-transition="slidedown" class="pix"></a>
- <div data-role="popup" data-theme="b" data-overlay-theme="b" data-shadow="false" id="pu-li0">
- <!-- Nothing to see here. Please move along. -->
- <img class="pu-img" src="../images/image0.jpg" alt="pu-li0">
- </div>
- .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 -
- <a href="#pu-li0" data-rel="popup" data-position-to="window" data-
- 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).
- <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>
- <div data-role =" popup " data-theme =" b " data-overlay-theme =" b " data-shadow =" false " id =" pu-li0 ">
- <!-- Nothing to see here. Please move along. -->
- <img class =" pu-img " src =" ../images/image0.jpg ">
- </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.