Ion-tabs are only highlighted/active once on click

Ionic Framework ionic-v3
1

Current behavior:
The root page of ny app is a log in page where you can either chose to log in whit email/password or facebock via firebase.

When you are authenticated, the TabsPage is pushed like this:

 firebase.auth().onAuthStateChanged((user)=>{
      if(user) {
        this.navCtrl.push(TabsPage);
      }
    });

tabs.html

<ion-tabs #mainTabs>
  <ion-tab [root]="tab1Root" tabTitle="title1" tabIcon="any-logo" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="title2" tabIcon="any-logo"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="title3" tabIcon="any-logo"></ion-tab>
</ion-tabs>

tabs.ts

import { Component, ViewChild } from '@angular/core';
import { Tabs } from "ionic-angular"
import { FirstPage } from '../first/first';
import { SecondPage } from '../second/second';
import { ThirdPage } from '../third/third';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root: any = FirstPage;
  tab2Root: any = SecondPage;
  tab3Root: any = ThirdPage;
  @ViewChild('mainTabs') mainTabs: Tabs;
  constructor() {}
  ionViewDidEnter() {
    //..
  }
}

… and everything seems OK. The navigation is perfect, but… The tabs can only be highligted/active/selected the first time they are selected. The second time you click on the tab, navigating from another tab, the tab that is clicked stays unselected.

Other information:
When i check the DOM-elements while navigating i around i can see that “aria-selected”-property of the <a class"tab-button">-element (the tab) is unchanged. But when i manually change the value, true or false, the tab selected becomes selected accordingly.

The problem disappears if any other page is pushed before the tabPage:

this.navCtrl.push(OtherPage); // push other page here
this.navCtrl.push(TabsPage);

I did accutually mange to work around this problem by loading the TabsPage in the constructor of the OtherPage. But thats so ugly.

Am I doing anything wrong or is this a built in bug?