Elements dissapear on tab navigate and scroll ios only

Hello, I’ve come across a strange bug I cannot solve. When I navigate to my second tab, the page acts as expected. Then if I navigate back to the first tab, then go back to the second tab, my elements now dissapear on scroll. This happens on ios only, and it happens no matter what component I set as tab number 2.

I’m using a typical tab layout that I will post below. Any help would be greatly appreciated.

import { Component } from '@angular/core';

import { HomeComponent } from '../../home/home-component/home.component';
import { FirebaseHomeComponent } from '../../firebase/firebase-home/firebase-home.component';

  templateUrl: 'tabs.html'
export class TabsComponent {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomeComponent;
  tab2Root: any = FirebaseHomeComponent;

  constructor() {



  <ion-tab [root]="tab1Root" tabTitle="{{'HOME' | translate}}" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{'PROFILE' | translate}}" tabIcon="contact"></ion-tab>


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../app/shared/shared.module';
import { TabsComponent } from './tabs-component/tabs.component';

  declarations: [
  imports: [
  exports: [
export class TabsModule {}

Ionic Framework: 3.2.0
Ionic app script: 3.0.0
Angular core: 4.1.0
angular compiler cli: 4.1.0
node: 8.9.0

Any ideas on this one? I’ve searched everywhere for answers there are none this is really my last hope lol.

ios build only: click tab 2 click back to tab 1 then click back to tab 2. Elements now disapear on scroll.

Has nothing to do with the elements used because behavior is same on all components that are set to tab 2 and these components are not broken.