Nav Bar flickering with custom tabs implementation

ionic-v1
1

Dear Ionic Forum Members,

I have a strange issue with my custom tabs integration. There is a noticeable flickering of the nav bar title and icon (Events + hamburger icon). Strangely the flickering occurs exactly on each second tab click. Here is a video demonstrating the issue:

Here is my custom tab markup:

<ion-view view-title="Events" hide-back-button="true">
    <ion-header class="bar bar-subheader" style="padding:0;">
        <div class="subTabs">
            <span class="tabsItem active" translate="lang_events_featured"></span>
            <a class="tabsItem" nav-transition="none" href="#/tab/events/highlights" translate="lang_events_highlights"></a>
            <a class="tabsItem" nav-transition="none" href="#/tab/events/today" translate="lang_events_today"></a>
        </div>
    </ion-header>

    <ion-content class="has-subheader bg-1">

Does anyone have an idea what could cause the flickering? Any help is much appreciated :wink:

2

here is a Codepen based on the default Tabs project which has the same issue. Every second tab click the nav title and icon flickers.

3

Hi @menelik,

So the problem you’ve got is that you’re trying to use a tabbed interface inside a tabbed interface but using the same ion-nav-view that the main tabbed interface uses.

Essentially that means that whenever the sub-tab-interface changes tabs your re-inserting the whole sub-tab row into the html again and that’s causing a flicker (and yeah some interaction with that and the header is creating a flicker as well).

The solution is to use a nested view inside the home tab, so when you change the sub-tab tab you’re just injecting the html only for the sub tab content and not for the whole page. So in your app there will be 3 levels of ion-nav-view.

  1. the main ion-nav-view in the index.html file.
  2. the second level ion-nav-views inserted by the tabs.html.
  3. specifically the home tab ion-nav-view will have a 3rd level ion-nav-view which is where you’ll insert the sub tab content.

Phew… quite a lot to take in! To cut a long story short, here’s a code pen: http://codepen.io/jawache/pen/ZGNWed

I didn’t mean to spend this long on answering this question but i just finished recording the part of my upcoming ionic course which deals with nested views in uiRouter so thought what the hell, if you want sign up to the newsletter at http://codecraftpro.com and i’ll let you know when the course is released (in 7 days or so)…

1 Like
4

@jawache

Thank you very much for your help and the provided codepen - it fixes the issue with the tab flickering.

I already signed up to your newsletter (saw your post in the slack group yesterday) and looking forward to your ionic udemy course :wink: