bug: scroll not working ios device in ionic 4

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.

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

[liamdebeasi]

Hi there,

Thanks for the follow up. I was able to resolve the issue by removing the swipeleft event binding on ion-content in upcoming.page.html. HammerJS can sometimes interfere with scrolling events, so additional configuration may be required.

I am going to close this as this is not an Ionic issue.

For further helping debugging your code, feel free to post on our forum or our slack.

Thanks!

[dominicg666]

@liamdebeasi Thank you , It’s working 💯