Ionic-framework: bug: scroll not working ios device in ionic 4

[dominicg666]

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 issue. We do not typically recommend implementing split pane applications like this, so that may be the source of your scrolling issues.

Please try implementing it the recommended way as seen in the Ionic starters, and let me know if you are still running into this issue after that: https://github.com/ionic-team/starters/blob/master/angular/official/sidemenu/src/app/app.component.html

Thanks!

[dominicg666]

Yes we are following the same structure you had mentioned. But the issue is occurring when we try to bind a segment tab inside a page.
What is the proper way to render a segment tab inside bottom tabs.
As If now it is working fine in android but not on ios.

[liamdebeasi]

Hi there,

Can you provide a repository with the code required to reproduce this issue?

Thanks!

[dominicg666]

Hi, I've uploaded the code in git. Repository URL is
https://github.com/dominicg666/nhproject

Login Credentials are
user: [email protected]
pwd:123456a

After logged in please click "my Shift" button in the bottom tabs. You can see the scroll is not working inside the page for both segments. NB: Issue exist only in iPhone. We are checking with iPhone 7 and 6.

[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 💯

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.