jQuery Mobile page content not loading on on first visit

Question

I am using jQuery Mobile and Phonegap to develop a new app for iOS devices.

• jquery mobile-1.3.2
• Cordova 3.0.0-0

Im having an issue loading the main content of a page, the main page load normally without any problem however if i click navigate to anther page the main content of page dose not load. If I visit another page on my application or simply go back and revisit all the contents load without any problem whatsoever.

Page on the first visit

Page after first visit

Going into my logs there is no error the only message i can see is

1. CDVWebViewDelegate: Navigation started when state=1
2. Failed to load webpage with error: CDVWebViewDelegate: Navigation started when state=1

Just to make it clear these two errors are there all the time so i am not sure if it is something to do with loading main content of the page

Here is my code

  <!--FAQs --> <div data-role="page" id="fqsabout_pg" data-title="fqsabout_pg" data-theme="x"> <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a data-role="none" class="logo_img overlay30" data-transition="none"> <img class="banner" id="banner" src="" alt=""> </a> <div class="separator"></div> <div class="sub-title">FAQs</div> </div> <div data-role="content" class="scrollable schrollcontiner"> <div class="pg-massage-box"> <p class="pg-message"> This section contains answers to some of the most common questions</p> <div data-role="popup" id="howVacWork"> <p>Some text</p> </div> <p></p> </div> <div data-role="collapsible-set" data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d" data-iconpos="right" class="vacccine-pg-list-box" data-theme="b"> <div data-role="collapsible" id="Routine-collaspible"> <h3>Alternatives</h3> <ul data-role="listview"> <li><a href="#xyz" data-transition="none">xyz </a></li> <li><a href="#wbw" data-transition="none">wbw</a></li> </ul> </div> <div data-role="collapsible" id="Special-collaspible"> <h3>Safety</h3> <ul data-role="listview"> <li><a href="#mnw" data-transition="none">mnw</a></li> <li><a href="#qrc" data-transition="none">qrc </a></li> </ul> </div> </div> <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-tap-toggle="false"> <div data-role="navbar" data-iconpos="top" id="line"> <ul> <li> <a href="#home_pg" id="tab1" data-transition="none"> <img src="img/HoMe.png" alt="" /> </a> </li> </ul> </div> </div> </div> 

Answer 1

After some research I mange to fix the problem.

Apparently iOS8 doesn't support -webkit-overflow-scrolling: touch;

Removing -webkit-overflow-scrolling: touch; Fix the problem.