scroll not working ios device in ionic 4

Ionic Framework
1

scroll is disabled in ios when I put ion-router-outlet inside ion-content. Here is my code

<ion-header >
  <ion-toolbar >
    <ion-avatar>
      
    </ion-avatar>
    <ion-buttons slot="end">
      <ion-button class="default" routerLink='/nurse/tabs/notification'>
        <ion-icon name="notifications"></ion-icon>
        <span class="count notifications" >{{api.notificationCount}}</span>
      </ion-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
    <div class="segmentBtns">
      <ion-button color="light" routerLink="/nurse/tabs/myshifts/upcoming" routerLinkActive #upc="routerLinkActive"
        [fill]="(upc.isActive)?'solid':'outline'" rla.isActive>Upcoming</ion-button>
      <ion-button color="light" routerLinkActive #comp="routerLinkActive" [fill]="(comp.isActive)?'solid':'outline'"
        routerLink="/nurse/tabs/myshifts/completed">Completed</ion-button>
    </div>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-split-pane contentId="myshifts">
    <ion-router-outlet id="myshifts"></ion-router-outlet>
  </ion-split-pane>
</ion-content>

And my module.ts file contains this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';
import { SkeltonHeaderPageModule } from '../../directives/skelton/skelton-header/skelton-header.module';
import { SkeltonListSinglePageModule } from '../../directives/skelton/skelton-list-single/skelton-list-single.module';

import { MyshiftsPage } from './myshifts.page';

const routes: Routes = [
  {
    path: '',
    component: MyshiftsPage,
    children: [
          {
            path: 'upcoming',
            loadChildren: './upcoming/upcoming.module#UpcomingPageModule'
          },
          {
            path: 'completed',
            loadChildren: './completed/completed.module#CompletedPageModule'
          },
          {
            path: '',
            redirectTo: 'upcoming',
            pathMatch: 'full'
          }
        ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    SkeltonHeaderPageModule,
    SkeltonListSinglePageModule
  ],
  declarations: [MyshiftsPage]
})
export class MyshiftsPageModule {}

Any help would be much appreciated.

2

So putting an ionRouterOutlet in an ion-content is not really the correct way to handle things. You should have the router-outlet be top-level and not nested in ion-content.

3

The main issue has been nested ion-content Events ( swipeLeft and swipeRight ) couldn’t allowed scroll in ios devices . so i have do removed these events. now its working well. thank you for replay.

4

I’m facing the same issue with ionic 4 and ion router outlet. Can you explain more on how you solved the swipe issue?

5

if you have to add swipe event, the scroll will not work in ios devices.

Please goes through the below link for the better clarification

https://github.com/ionic-team/ionic/issues/18273