Search jQuery

jQuery Forum

white flash between transitions

in Getting Started • 11 years ago

Hi i have built an app and all works perfectly except for one thing. I have href link and swipe actions to transition to next page. However when going to 2 of the pages i get a white flash one the page comes in. And i can't figure out at all why it only happens on two of the pages. I am using the latest scripts too.

It only seems to happen on iphone and ipad not in a browser

I can't post the full code for confidentiality reasons, but here is a snippet.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="KEYWORDS" />
<meta name="description" content="DESCRIPTION" />
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script src="jquery-1.6.min.js"></script>
<script src="jquery.mobile-1.0a4.1.min.js"></script>
<script src="phonegap.0.9.5.js" type="text/javascript" charset="utf-8" ></script>
</head>
<body onLoad="onLoad()">
<div id="home" data-role="page" class="home">
<div data-role="header" class="header" data-backbtn="false" data-position="fixed">
<p><img src="logo.png" width="141" height="25" alt="" ></p>
</div>
<div data-role="content">
<p><img src="logo_large.png" width="200" height="35" alt="" ></p>
<div class="home-title"></div>
</div>
<div data-role="footer" data-id="footer" data-class="footer" class="footer" data-position="fixed">
<a href="#contact" id="btnContact" class="smallBtn">Contact us</a>
<div class="next"><a href="#step1" id="next" class="smallBtn next right">Next</a></div>
</div>
</div>
<div id="step1" data-role="page">
<div data-role="header" class="header" data-backbtn="false" data-position="fixed">
<p><img src="logo.png" width="141" height="25" alt="" ></p>
</div>
<div data-role="content">
<h1><span>Calculator</span></h1>
<div data-role="fieldcontain">
</div>
<div data-role="fieldcontain">
</div>
</div>
<div data-role="footer" data-id="footer" data-class="footer" class="footer" data-position="fixed">
<div class="back"><a href="#home" id="btnBack" data-direction="reverse" class="smallBtn">Back</a></div>
<a href="#contact" id="btnContact" class="smallBtn">Contact us</a>
<div class="next"><a href="#step2" id="next" class="smallBtn next right">Next</a></div>
</div>
</div>
<div id="step2" data-role="page">
<div data-role="header" class="header" data-backbtn="false" data-position="fixed">
<p><img src="logo.png" width="141" height="25" alt="finance you" ></p>
</div>
<div data-role="content">
<h1><span>Input data</span></h1>
<div data-role="fieldcontain">
</div>
<div data-role="fieldcontain">
</div>
<div data-role="fieldcontain">
</div>
<div data-role="fieldcontain" id="balloon-div">
</div>
</div>
<div data-role="footer" data-id="footer" data-class="footer" class="footer" data-position="fixed">
<div class="back"><a href="#step1" id="btnBack" data-direction="reverse" class="smallBtn">Back</a></div>
<a href="#contact" id="btnContact" class="smallBtn">Contact us</a>
<div class="next"><a href="#step3" id="next" class="smallBtn next right" style="display:none;">Next</a></div>
</div>
</div>
<div id="step3" data-role="page">
<div data-role="header" class="header" data-backbtn="false" data-position="fixed">
<p><img src="logo.png" width="141" height="25" alt="" ></p>
</div>
<div data-role="content" class="results">
<h1><span>Results</span></h1>
</div>
<div data-role="footer" data-id="footer" data-class="footer" class="footer" data-position="fixed">
<div class="back"><a href="#step2" id="btnBack" data-direction="reverse" class="smallBtn">Back</a></div>
<a href="#contact" id="btnContact" class="smallBtn">Contact us</a>
<div class="next"><a href="#step4" id="next" class="smallBtn next right">Next</a></div>
</div>
</div>
<div id="step4" data-role="page">
<div data-role="header" class="header" data-backbtn="false" data-position="fixed">
<p><img src="logo.png" width="141" height="25" alt="" ></p>
</div>
<div data-role="content">
<h1><span>Your details</span></h1>
<div data-role="fieldcontain">
</div>
<div data-role="fieldcontain">
</div>
<div data-role="fieldcontain">
</div>
</div>
<div data-role="footer" data-id="footer" data-class="footer" class="footer" data-position="fixed">
<div class="back"><a href="#step3" id="btnBack" data-direction="reverse" class="smallBtn">Back</a></div>
<a href="#contact" id="btnContact" class="smallBtn">Contact us</a>
<div class="next"><a href="#" id="next" class="smallBtn next right">Next</a></div>
</div>
</div>
<div id="step5" data-role="page">
<div data-role="header" class="header" data-backbtn="false" data-position="fixed">
<p><img src="logo.png" width="141" height="25" alt="finance you" ></p>
</div>
<div data-role="content" class="thanks">
<h1><span>Thank You!</span></h1>
</div>
<div data-role="footer" data-id="footer" data-class="footer" class="footer" data-position="fixed">
<div class="back"><a href="#home" id="btnBack" data-direction="reverse" class="smallBtn">Home</a></div>
<a href="#contact" id="btnContact" class="smallBtn">Contact us</a>
</div>
</div>
<div id="contact" data-role="page">
<div data-role="header" class="header" data-backbtn="false" data-position="fixed">
<p><img src="logo.png" width="141" height="25" alt="finance you" ></p>
</div>
<div data-role="content" class="contact">
<h1><span>Contact us</span></h1>
<div>
</div>
<div>
</div>
</div>
<div data-role="footer" data-id="footer" data-class="footer" class="footer" data-position="fixed">
<div class="back"><a href="#home" id="btnBack" data-direction="reverse" class="smallBtn">Home</a></div>
</div>
</div>
<div data-role="dialog" id="error">
<div data-role="header" data-backbtn="false">
<h1>More information needed</h1>
</div>
<div data-role="content" class="contact">
<p id="errorMsg"></p>
<p id="errorClose"><a href="#step2" rel="external" class="btn">OK <span></span></a> </p>
</div>
</div>
</body>
</html>

Response title

Attachments

jQuery Forum

white flash between transitions

Statistics

Tags

Actions