flickering issue on Footer data-position="fixed'
I'm developing a mobile app with listview indexes and articles of various lengths using fixed headers and footers.
I'm experiencing a flickering issue on pages when i set eh footer to fixed position: disappears and blinks when i pass from page to page ...i'm using listviews <ul> <li>
if i remove the "fixed position" the issue doesn't appear.
I'm testing it on Android 4.0.3 and i'm using jquery 1.2
I tried in css .ui-listview, .ui-li { list-style:none; padding:0; -webkit-transform: translateZ(0); but the issue still
HTML content below, I'd appreciate some feedback if anyone has experienced a similar issue:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<script type="text/javascript" charset="utf-8" src="js/LebDirectory.js"></script>
<script type="text/javascript" src="js/head-LebDirectory.js"></script> <!--wa-->
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide();
checkregistration();
getLocation();
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<div id="#errorwama" class="errorwama"></div>
<div data-role="page" id="jqm-home">
<div data-role="header" data-theme="b" >
<script type="text/javascript" src="js/LebDirectory-Header.js"></script>
<script type="text/javascript" src="js/clearError.js"></script>
</div>
<div id= "content" data-role="content" style="height: 90%">
<ul data-role="listview" data-inset="true" id="listview1" >
<li ><a data-transition="slide" href="#SubCategoryAccomodation" ><img src='images/Accomodation.png' alt="Accomodation" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Accommodation</div><div> ????? ???????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryCultural" ><img src='images/Book.png' alt="Cultural" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Cultural</div><div> ?????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryHealthcare" ><img src='images/medical.png' alt="medical" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Healthcare/Medical</div><div> ????? ???? / ????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryLeisure" ><img src='images/leisure2.png' alt="Leisure and Fun" style="float:left; width: 50px; height: 60px;"> <div style="display: inline">Leisure and Fun</div><div> ????? ????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryNightLife" ><img src='images/night.png' alt="Night Life" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Night Life</div><div> ???? ?????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryProfessionals" ><img src='images/professional.png' alt="Professionals" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Professionals</div><div> ??????/??????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryRealEstate" ><img src='images/real.png' alt="Real Estate" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Real Estate</div><div> ????????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryReligion" ><img src='images/religion.png' alt="Religion" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Religion</div><div> ???</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryRestaurants" ><img src='images/restaurant.png' alt="Restaurants" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Restaurants</div><div> ?????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryServices" ><img src='images/services.png' alt="Services" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Services</div><div> ?????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryShopping" ><img src='images/Shopping.png' alt="Shopping" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Shopping</div><div> ??????</div></a></li>
<li ><a data-transition="slide" href="#SubCategoryUsefulInfo" ><img src='images/useful.png' alt="Useful Info" style="float:left; width: 50px; height: 50px;"> <div style="display: inline">Useful Info</div><div> ??????? ?????</div></a></li>
</ul>
</div>
<script type="text/javascript" src="js/LebDirectory-Footer.js"></script>
<script type="text/javascript" src="includes/footer.htm"></script>-->
</div>
<div data-role="page" id="SubCategoryAccomodation" data-theme="c">
<div data-role="header" data-theme="b">
<script type="text/javascript" src="js/LebDirectory-Header-Accomodation.js"></script>
<script type="text/javascript" src="js/clearError.js"></script>
</div>
<link rel="stylesheet" href="css/private.css" type="text/css">
<div style="padding:5px;">
<ul data-role="listview" data-inset="true" id="Ul1">
<li onclick='getpublishers("Hotels",22,2)'><a data-transition='slide' > <img src='images/hotel-icon.png' style='float:left; width: 50px; height: 50px;'> <div style='display: inline; float: left;'>Hotels</div><div style='float: left'> ?????</div></a>
<li onclick='getpublishers("Apartments",23,2)'><a data-transition='slide' > <img src='images/Apartment.png' style='float:left; width: 50px; height: 50px;'> <div style='display: inline; float: left;'>Apartments</div><div style='float: left'> ??? ??????</div></a>
<li onclick='getpublishers("Resorts",24,2)'><a data-transition='slide' > <img src='images/Resorts.png' style='float:left; width: 50px; height: 50px;'> <div style='display: inline; float: left;'>Resorts</div><div style='float: left'> ???????</div></a>
</ul>
</div>
<script type="text/javascript" src="js/LebDirectory-Footer.js"></script>
</div>
</body></html>
and here is the footer :
document.write('<div class="footer" data-position="fixed" ; height: 7%;">'
+ '<a href="#popupMenu" data-rel="popup" data-inline="true" style="float:right"><img src="images/Settings.png" style="float:right"> </a> '
+ '<iframe id="a69ba800" name="a69ba800" src="http://ads.moursel.com/www/delivery/afr.php?zoneid=30&target=_blank&cb=INSERT_RANDOM_NUMBER_HERE" frameborder="0" scrolling="no" width="234" height="60"><a href="http://ads.moursel.com/www/delivery/ck.php?n=ac1abadd&cb=INSERT_RANDOM_NUMBER_HERE" target="_blank"><img src="http://ads.moursel.com/www/delivery/avw.php?zoneid=30&cb=INSERT_RANDOM_NUMBER_HERE&n=ac1abadd" border="0" alt="" /></a></iframe>'
+ '<div data-role="popup" id="popupMenu" data-theme="a">'
+ '<ul data-role="listview" data-inset="true" style="min-width:180px;" data-theme="c"> '
+ '<li data-role="divider" data-theme="a">MENU</li> '
+ '<li><a href="inbox.html">Inbox</a></li> '
+ '<li><a href="#Feedback">Feedback</a></li> '
+ '</ul> '
+ '</div> '
+ '</div> <!-- fine footer --> ');