Ionic 4 scroll not working properly on iOS

Question

I have a Ionic 4 Cordova mobile app that works on Android but has some weird scrolling issues on iOS. The ion-content does not scroll (vertical scroll), and strangely, when I open the side menu, the scroll starts working again, and it stops working when I close the side menu. I attach the html of the app component.

I also have no idea where did the problem come from, as it was working fine with Ionic 3.

Here is the app.component.html for the app:

  <ion-header class="menu-header menu-title-ios-adapter">
    <ion-toolbar>
      <ion-title class="title-small">Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="main-menu-bg">
    <ion-list *ngFor="let menuGroup of appMenu; let i = index" class="transparent-bg">
      <ion-list-header *ngIf="menuGroup.name">
        {{menuGroup.name}}
      </ion-list-header>
      <div *ngFor="let p of menuGroup.pages">
        <ion-menu-toggle autoHide="false" class="transparent-bg"
          [ngClass]="isActive(p) ? 'icon-color-3':'icon-color-light'"
          *ngIf="(p.enabled===undefined || p.enabled.value) && ((p.loginRequired && authenticated) || (!p.loginRequired && !authenticated) || (p.loginRequired === undefined))">
          <!-- <ion-item tappable (click)="openPage(p)" class="transparent-bg"> -->
          <ion-item tappable [routerDirection]="'root'" [routerLink]="p.url" class="transparent-bg padding-left-s">
            <icon-wrapper class="slot-icon-padding" customClass="normal" slot="start" [icon]="p.icon" [custom]="p.customIcon"></icon-wrapper>
            <ion-label>
              <span class="text-color-gold">{{p.title}}</span>
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </div>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-router-outlet id="content" main></ion-router-outlet>

Here is the content of a page:

<ion-content>
  <div class="view-frame" fxLayout="column">
    <div class="scrollbar-y" (swipe)="swipeEvent($event)">
      <ion-list class="list-padding">
        <ion-item *ngFor="let leader of board" class="list-item">
          <!-- item -->
        </ion-item>
      </ion-list>
    </div>
  </div>
</ion-content>

Here is the css in question:

.view-frame {
height: auto;
overflow-y: auto;
overflow-x: hidden;
display: block;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
z-index: 999999999;
}

.scrollbar-y {
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}

This can be a lot of things. Are you using hammerjs? swipe gestures? what's your CSS? are you using anything inside main-menu-bg class that prevents bounce / overflow? Please share more of context and your code. Otherwise its real hard to help — Sergey Rudenko
Thank you for your good observations. I am using hammerjs and swipe gestures indeed. I will edit the question to include some more detail. — Alex Predescu
On your .scrollbar-y class try (for experiment) setting: touch-action: pan-x !important; Maybe play around with the values from here: hammerjs.github.io/touch-action — Sergey Rudenko
The thing is that it's very strange that the page actually scrolls only when there is a modal above it (or sidemenu open). And the modal responds to the tap and scroll too. Also, I am using a google maps plugin and the behavior is similar, the map moves even when there is a modal on top. Also this happens only on iOS. — Alex Predescu
It turns out that hammerjs was indeed the problem. I commented the import and now it's working fine. Thank you for pinpointing the issue — Alex Predescu

raymond lian raymond lian · Accepted Answer · 2019-12-20T03:37:01

This issue is cause by trying to have both swipe and scroll gestures enabled. Try removing swipe or try the suggestion on this thread. https://github.com/angular/angular/issues/10541 From what the actual people who have made this work have said the issue is related to angular. Good luck.

Ionic 4 scroll not working properly on iOS

1 Answers