When changing tabs,there is a empty view with white background until the content is rendered

When changing tabs,there is a empty view with white background until the content is rendered. How can I solve this? Thank you.

1 Like

I have solved it.If I add a state resolve which returns promise object,It will happen.So I changed my code.

Hi YangChen,

I am also getting same issue. Could u please explain how to resolve this problem. Currently i am using ionic beta 12 version.

Thank You.

Woa is it because of the resolve :o i used all kinds of dirty fixes to solve this and i only solved the header to stay put and updated with ugly views and stuff

i had this solution,

<ion-tabs class="tabs-custom tabs-icon-top">
  <ion-tab title="Alerts" ui-sref="tab.alerts" icon-on="icon-alerts-on" icon-off="icon-alerts-off">
    <ion-view>
      <ion-nav-bar class="bar-stable">
      </ion-nav-bar> 
    </ion-view>
    
    <ion-nav-view name="alerts" >
    </ion-nav-view>
  </ion-tab>
  
  <ion-tab title="Volgend" ui-sref="tab.volgend" icon-on="icon-volgend-on" icon-off="icon-volgend-off">
      <ion-view>
        <ion-nav-bar class="bar-stable">
        </ion-nav-bar> 
	</ion-view>
      <ion-nav-view name="volgend" title="Volgend">
      </ion-nav-view>
  </ion-tab>
  
  <ion-tab title="Maak Alert" class="tab-standout" ui-sref="tab.maakalert" icon-on="icon-maak-on" icon-off="icon-maak-off">
      <ion-view>
        <ion-nav-bar class="bar-stable">
        </ion-nav-bar>
      </ion-view>
      <ion-nav-view name="maakalert" title="Maak Alert">
      </ion-nav-view>
  </ion-tab>
  
  <ion-tab title="Berichten" ui-sref="tab.berichten" icon-on="icon-berichten-on" icon-off="icon-berichten-off">
      <ion-view>
        <ion-nav-bar class="bar-stable">
        </ion-nav-bar>
      </ion-view>
     
      <ion-nav-view name="berichten" title="Berichten" >
      </ion-nav-view>
  </ion-tab>
  
  <ion-tab title="Profiel" ui-sref="tab.profiel" icon-on="icon-account-on" icon-off="icon-account-off">
    <ion-view>
      <ion-nav-bar class="bar-stable">
      </ion-nav-bar>
    </ion-view>
    
    <ion-nav-view name="profiel" title="Profiel">
    </ion-nav-view>
  </ion-tab>

</ion-tabs>`

but it seems you should put the view around your ion-content so i changed it all back. now i have a static header which updates after about 5 seconds with the correct title and content

Heeey so i looked into this and it may not be the best solution but i’ve added the resolve too my rootscope in the main cntrl of my app which is hooked to the index.html body, it’s solved all my problems and is like 10 times faster then it was.

My problem was whenever I change tabs the empty view displays.Because I gave each tab a promise resolve to get some asynchronous data.Then I changed to get all data when the app launch and remove those resolves.So the empty view only displays at the first time I change tab, because of the view file hasn’t been cached.For me that’s ok.

Hi YangChen,

Thanks for giving reply, My problem is when i switch from one page to another page it is displaying white page before rendering the page. After rendering the page my app is working fine. Only problem is displaying white screen when switching from one page to another page.

Thank You.

Well, accordingly to ui-router documentation, the state view only starts the change when all dependencies of the controller are resolved. In my case, Im seeing a black background, defined on CSS. I think it’s a Ionic bug.

And resolve everything on app startapp/rootScope isn’t the best choice. The user may fetch unnecessary data.

By the way, I’m using the tab starter project and implemented the service using ngResource to fetch data from a json.

hello there, I have tried to find a solution to this white background problem but after searching and testing all your answers, nothing works.

<ion-tab title="News" icon-off="ion-android-earth" icon-on="ion-android-earth" href="#/tab/news">
        <ion-nav-view name="tab-news"></ion-nav-view>
        <ion-view>
            <ion-nav-bar class="hackbg">
            </ion-nav-bar>
        </ion-view>
    </ion-tab>

Even with this, I can see the white background for a fraction of a second when I navigate through the tabs which is really annoying if you ask me :frowning:

I have 4 tabs, 3 of them get dynamic data from an http call, the last tab loads an iframe with a video from YouTube. When I launch the app, and navigate through any of the tabs, I can see the annoying white background. Now, if I click on the 4 tab (the iframe video) the first time, I will also see the white background for a fraction of a second. However, if I navigate to another tab (which that said, I will also see the white background), and I come back to the video tab, I will then NO see the white background anymore. All the other 3 tabs I will always see the white background, independently of the times I visit the tab section.

My individual tabs pages look like the following:

<ion-view hide-nav-bar="true" class="hackbg">
    <ion-header-bar class="bar-positive bar-header" align-title="left">
        <h1 class="title">Logo...</h1>
        <div class="buttons pull-right">
            <button ng-click="go1()" class="button button-icon icon  ion-ios7-1"></button>
            <button ng-click="go2()" class="button button-icon icon  ion-ios7-2"></button>
            <button ng-click="go3()" class="button button-icon icon  ion-ios7-3"></button>
            <button class="button button-icon ion-android-more" ng-click="popover.show($event)"></button>
        </div>
    </ion-header-bar>
...

As you can see, I have also added the hackbg on the ion-view with the hope that would fix the problem but it didn’t.

I have try/catch all over the code to try to see if I have an error somewhere in the code and that’s why the white background. However, no luck, I don’t see any error anywhere.

If I go to the individual pages from the navigation (e.g. look at buttons like go1(), I do not see any white background). The problem are only related to the tabs.

Ah, my splashscreen also shows the white background for a fraction of a second after it loads my splashscreen. I also went and google all possible solutions but none did the trick.

My .run contains the following:

 $ionicPlatform.ready(function () {
        setTimeout(function () {
            navigator.splashscreen.hide();
        }, 6000

I extended the delay to 6000 hoping it will make the white background disappear. It didn’t. Interesting thing is that sometimes you see it longer and sometimes extremely fast. It is not consistent.

Does anyone knows another trick I could try to fix this?