Ionic 4 iOS scrolls TABS and not Content (header too)

Ionic Framework
1

Hello everyone,

This happens only on iOS, in android the tabs are NON SCROLL-ABLE. the user can scroll the content, but also it scrolls the tabs and the header.

click here to see the video LINK

meanwhile i have a menu that swipes from left to right side, it scrolls the content if i try two three times while if i catch the tabs it scrolls the TABS and if i try to scroll the CONTENT it keep SCROLLING THE TABS, HEADER TOO.

i have tried these two solutions, which it does not work for me:
solution 1

solution 2

on the Solution 2 i get the tabs non scroll-able but i dont get the content and nothing works, as i can see it can switch between the tabs but none of the contents does not work.
click here to see second video

i have made two ion-tab-bar, one for activated profile with buttons enabled, and the other for disabled buttons for non activated profile.

this is app.component.html code containing menu:

<ion-app>
  <ion-menu [disabled]="this.profileService.profile.length === 0" side="end" menuId="first" contentId="content1">
        <ion-header>
          <ion-toolbar>
            <ion-title>{{ 'menu' | translate }}</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
          <ion-menu-toggle auto-hide="true">
            <ion-item lines="none" (click)="goToEditprprofileFromMenu()">
              <ion-avatar style="width: 30px; height: 30px; margin-right: 25px;">
                <img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
                <ng-template #noProfilePicFound>
                  <img src="/assets/profilePic.png">
                </ng-template>
                </ion-avatar>
                <ion-label>{{ 'my_profile' | translate }}</ion-label>
            </ion-item>
            <ion-item (click)="goToSubsciptions()" lines="none">
                <ion-icon slot="start" src="assets/new-admify-icons/subscriptions-active.svg"></ion-icon>
                <ion-label>{{ 'subscriptions' | translate }}</ion-label>
            </ion-item>
            <ion-item lines="none"  (click)="addAFeedback($event)">
              <ion-icon slot="start" color="primary" name="paper"></ion-icon>
              <ion-label>{{ 'feedback' | translate }}</ion-label>
            </ion-item>
        <ion-item lines="none"  (click)="logout()" style="color: var(--ion-color-danger); ">
          <ion-icon slot="start" color="danger" name="exit"></ion-icon>
          <ion-label>{{ 'logout' | translate }}</ion-label>
        </ion-item>
          </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
  <ion-router-outlet id="content1"></ion-router-outlet>
</ion-app>

I also tried to add ion-split-pane, no success

<ion-app>
  <ion-split-pane contentId="content1">
    <ion-menu [disabled]="this.profileService.profile.length === 0" side="end" menuId="first" contentId="content1">
          <ion-header>
            <ion-toolbar>
              <ion-title>{{ 'menu' | translate }}</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content>
            <ion-list>
            <ion-menu-toggle auto-hide="true">
              <ion-item lines="none" (click)="goToEditprprofileFromMenu()">
                <ion-avatar style="width: 30px; height: 30px; margin-right: 25px;">
                  <img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
                  <ng-template #noProfilePicFound>
                    <img src="/assets/profilePic.png">
                  </ng-template>
                  </ion-avatar>
                  <ion-label>{{ 'my_profile' | translate }}</ion-label>
              </ion-item>
              <ion-item (click)="goToSubsciptions()" lines="none">
                  <ion-icon slot="start" src="assets/new-admify-icons/subscriptions-active.svg"></ion-icon>
                  <ion-label>{{ 'subscriptions' | translate }}</ion-label>
              </ion-item>
              <ion-item lines="none"  (click)="addAFeedback($event)">
                <ion-icon slot="start" color="primary" name="paper"></ion-icon>
                <ion-label>{{ 'feedback' | translate }}</ion-label>
              </ion-item>
          <ion-item lines="none"  (click)="logout()" style="color: var(--ion-color-danger); ">
            <ion-icon slot="start" color="danger" name="exit"></ion-icon>
            <ion-label>{{ 'logout' | translate }}</ion-label>
          </ion-item>
            </ion-menu-toggle>
            </ion-list>
          </ion-content>
        </ion-menu>
    <ion-router-outlet id="content1"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

this is tabs page with route:

<ion-header class="header-design-on-both">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goToNotifications()" >
        <ion-icon slot="icon-only"  src="assets/new-admify-icons/notifications.svg"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-searchbar class="ion-text-center" mode="ios" (ionChange)="changeOnSearchBar($event)" (ionFocus)="focusOnSearch($event)" debounce="1000"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button (click)="goToChat()">
        <ion-icon slot="icon-only" src="assets/new-admify-icons/chat.svg"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed" style="margin-bottom: 50px; opacity: 90%">
    <ion-fab-button (click)="goToAuftrage()" size="small" style="--background: var(--ion-color-gradient-blue-to-green) !important">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  <ion-tabs  mode="ios">
    <ion-tab-bar mode="ios" slot="bottom" class="tabs-design-on-unternehmen">
       <ion-tab-button mode="ios"  tab="dashboard" class="ion-activatable">
              <ion-avatar style="width: 30px; height: 30px;">
                <img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
                <ng-template #noProfilePicFound>
                  <img src="/assets/profilePic.png">
                </ng-template>
                </ion-avatar>
          </ion-tab-button>
      <ion-tab-button mode="ios"   tab="briefkasten">
        <ion-icon mode="md" src="assets/new-admify-icons/mail.svg" *ngIf="!selectedRouter.includes('briefkasten'); else doesIncludeBriefkasten"></ion-icon>
        <ng-template #doesIncludeBriefkasten>
          <ion-icon mode="md" src="assets/new-admify-icons/mail-active.svg" ></ion-icon>
        </ng-template>
      </ion-tab-button> 
      <ion-tab-button mode="ios"   tab="file-explorer" >
          <ion-icon mode="md" src="assets/new-admify-icons/fileexplorer.svg" *ngIf="!selectedRouter.includes('file-explorer'); else doesIncludeFileExplorer"></ion-icon>
          <ng-template #doesIncludeFileExplorer>
            <ion-icon mode="md" src="assets/new-admify-icons/fileexplorer-active.svg" ></ion-icon>
          </ng-template>
      </ion-tab-button>
      <ion-tab-button mode="ios"   (click)="goToChat()" >
          <ion-icon mode="md" src="assets/new-admify-icons/wallet.svg" *ngIf="!selectedRouter.includes('buchhaltung'); else doesIncludewallet"></ion-icon>
          <ng-template #doesIncludewallet>
            <ion-icon mode="md" src="assets/new-admify-icons/wallet-active.svg" ></ion-icon>
          </ng-template>
      </ion-tab-button>
      <ion-tab-button mode="ios"   (click)="goToChat()" >
          <ion-icon mode="md" src="assets/new-admify-icons/calculator.svg" *ngIf="!selectedRouter.includes('cart'); else doesIncludeCalculator"></ion-icon>
          <ng-template #doesIncludeCalculator>
            <ion-icon mode="md" src="assets/new-admify-icons/calculator-active.svg" ></ion-icon>
          </ng-template>
      </ion-tab-button>
      <ion-tab-button mode="ios"  (click)="openMenu()" >
        <ion-avatar style="width: 30px; height: 30px;">
          <img *ngIf="!selectedRouter.includes('kundenstamm'); else doesIncludeFinger" src="assets/new-admify-icons/Admify_Fingerprint.png">
          <ng-template #doesIncludeFinger>
            <img src="assets/new-admify-icons/Admify_Fingerprint-active.png">
          </ng-template>
          </ion-avatar>
      </ion-tab-button>
    </ion-tab-bar>

    <ion-tab-bar mode="ios" slot="bottom" class="tabs-design-on-unternehmen">
      <ion-tab-button mode="ios" disabled="true" tab="dashboard" class="ion-activatable">
        <ion-avatar style="width: 30px; height: 30px;">
          <img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
          <ng-template #noProfilePicFound>
            <img src="/assets/profilePic.png">
          </ng-template>
          </ion-avatar>
    </ion-tab-button>
<ion-tab-button mode="ios" disabled="true"  tab="briefkasten">
  <ion-icon mode="md" src="assets/new-admify-icons/mail.svg" *ngIf="!selectedRouter.includes('briefkasten'); else doesIncludeBriefkasten"></ion-icon>
  <ng-template #doesIncludeBriefkasten>
    <ion-icon mode="md" src="assets/new-admify-icons/mail-active.svg" ></ion-icon>
  </ng-template>
</ion-tab-button> 
<ion-tab-button mode="ios" disabled="true"  tab="file-explorer" >
    <ion-icon mode="md" src="assets/new-admify-icons/fileexplorer.svg" *ngIf="!selectedRouter.includes('file-explorer'); else doesIncludeFileExplorer"></ion-icon>
    <ng-template #doesIncludeFileExplorer>
      <ion-icon mode="md" src="assets/new-admify-icons/fileexplorer-active.svg" ></ion-icon>
    </ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true"  (click)="goToChat()" >
    <ion-icon mode="md" src="assets/new-admify-icons/wallet.svg" *ngIf="!selectedRouter.includes('buchhaltung'); else doesIncludewallet"></ion-icon>
    <ng-template #doesIncludewallet>
      <ion-icon mode="md" src="assets/new-admify-icons/wallet-active.svg" ></ion-icon>
    </ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true"  (click)="goToChat()" >
    <ion-icon mode="md" src="assets/new-admify-icons/calculator.svg" *ngIf="!selectedRouter.includes('cart'); else doesIncludeCalculator"></ion-icon>
    <ng-template #doesIncludeCalculator>
      <ion-icon mode="md" src="assets/new-admify-icons/calculator-active.svg" ></ion-icon>
    </ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true" (click)="openMenu()" >
  <ion-avatar style="width: 30px; height: 30px;">
    <img *ngIf="!selectedRouter.includes('kundenstamm'); else doesIncludeFinger" src="assets/new-admify-icons/Admify_Fingerprint.png">
    <ng-template #doesIncludeFinger>
      <img src="assets/new-admify-icons/Admify_Fingerprint-active.png">
    </ng-template>
    </ion-avatar>
</ion-tab-button>
    </ion-tab-bar>
  
  </ion-tabs>
  
</ion-content>

Any help would be appreciated, thank you.

2

What worked for me was putting <ion-tabs> outside of <ion-content> and <ion-toolbar>.