Parts of GUI turns black when switching between tab pages with different heights

Parts of GUI turns black when switching between tab pages with different heights

I have a navbar in the page footer with click listeners on every tab. When I switch tab, I just get the page div from javascript and set the html to the new content.  

Here's the HTML page:
  1. <div data-role="header" id="headertop" data-position="fixed" data-tap-toggle="false"  data-theme="a">
  2.       <div id="logoAndBackDiv">
  3.             <h1 id="header1">
  4.                <img src="css/images/flogo.png" alt="forex" id="img" width="50%" /></h1>
  5.       </div>
  6.       <div data-role="header"  data-theme="d">
  7.             <h1 id="appenh11">Appen</h1>
  8.       </div>        
  9. </div>          
  10.             
  11. <div data-role="content" style="text-align:center;" id="index">
  12.               
  13. </div>
  14.             
  15. <div data-role="footer" data-id="footer_" data-theme="b" data-position="fixed" data-tap-toggle="false">
  16.       <div data-role="navbar" class="customnavbar" >
  17.             <ul>
  18.                   <li><a id="appenviewbtn" data-icon="custom" id="" class="iconhome ui-btn-active ui-state-persist" data-transition="none">Splitta</a>
  19.              <li><a id="restipsviewbtn" data-icon="custom" class="iconlight" data-transition="none">Restips</a>
  20.              <li><a id="sparaviewbtn" data-icon="custom" class="iconprice" data-transition="none">Spara</a>
  21.              <li><a id="merviewbtn" data-icon="custom" class="iconstar" data-transition="none">Mer</a>
  22.             </ul>
  23.       </div>
  24. </div>


And this is the javascript:

  2. $(document)
  3. .on('pageinit', function()
  4. {
  5. $("#appenviewbtn").click( function(){
  6. //header
  7. $('#backBtn_').remove();
  8. $('#appenh11').text('Appen');

  10. //body
  11. var pageContent = '<br/>\
  12.             <p>Welcome!</p>\
  13.             <br/>\
  14.                <a id="newTripBtn" data-role="button" data-theme="e" data-transition="none">Ny resa</a>\
  15.             <a id="ongoingTripBtn"  data-role="button" data-theme="e" data-transition="none">Pågående resa</a>\
  16.             <a id="finishedTripsBtn" data-role="button" data-theme="e" data-transition="none">Avslutade</a>';
  17.                                
  18. $('#index').html(pageContent);
  19. $('#index').trigger('create');

  21. addSplittaClickListeners();
  22. });

There's a GUI problem when I switch from a scrolled tab to a tab that can't be scrolled that far. If I'm located at tab two in my app, which contains a list, and scroll down to the bottom of that list, and then tap tab 1, which doesn't even need the whole height of the screen, then tab 2 will be autoscrolled to the top, wait for like 1-2 tenths of a sec, and then the new content will be set. During the waiting, the list, in it's full screen height, will be… black. Not the whole screen but the actual list.

If I, similarly, scroll down just half a screen and then switch tab, then the bottom half of the list will be black during the wait. Consistently, the same height difference / numbers of pixels between the scrolled down page and the maximum scroll down of the switch-to tab page (if the switch-to tab page is "lower/lesser height" than the current tab page) will be black for that period of time (100-200 msec). The rest of the list will be just blank.

This's not only happening with the list but with every page where the scrolled down height of the current tab is greater than the height of the switch-to tab.

It's only visible on iPhone, not on Android devices. Does someone know a fix for this?