title: Ionic 4 scroll not working properly on iOS
body: <p>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.</p>
  
  <p>I also have no idea where did the problem come from, as it was working fine with Ionic 3.</p>
  
  <p>Here is the app.component.html for the app:</p>
  
  <p>
    
      </p>
  
  <pre><code>  &lt;ion-header class="menu-header menu-title-ios-adapter"&gt;
      &lt;ion-toolbar&gt;
        &lt;ion-title class="title-small"&gt;Menu&lt;/ion-title&gt;
      &lt;/ion-toolbar&gt;
    &lt;/ion-header&gt;
  
    &lt;ion-content class="main-menu-bg"&gt;
      &lt;ion-list *ngFor="let menuGroup of appMenu; let i = index" class="transparent-bg"&gt;
        &lt;ion-list-header *ngIf="menuGroup.name"&gt;
          {{menuGroup.name}}
        &lt;/ion-list-header&gt;
        &lt;div *ngFor="let p of menuGroup.pages"&gt;
          &lt;ion-menu-toggle autoHide="false" class="transparent-bg"
            [ngClass]="isActive(p) ? 'icon-color-3':'icon-color-light'"
            *ngIf="(p.enabled===undefined || p.enabled.value) &amp;&amp; ((p.loginRequired &amp;&amp; authenticated) || (!p.loginRequired &amp;&amp; !authenticated) || (p.loginRequired === undefined))"&gt;
            &lt;!-- &lt;ion-item tappable (click)="openPage(p)" class="transparent-bg"&gt; --&gt;
            &lt;ion-item tappable [routerDirection]="'root'" [routerLink]="p.url" class="transparent-bg padding-left-s"&gt;
              &lt;icon-wrapper class="slot-icon-padding" customClass="normal" slot="start" [icon]="p.icon" [custom]="p.customIcon"&gt;&lt;/icon-wrapper&gt;
              &lt;ion-label&gt;
                &lt;span class="text-color-gold"&gt;{{p.title}}&lt;/span&gt;
              &lt;/ion-label&gt;
            &lt;/ion-item&gt;
          &lt;/ion-menu-toggle&gt;
        &lt;/div&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  
  &lt;/ion-menu&gt;
  
  &lt;ion-router-outlet id="content" main&gt;&lt;/ion-router-outlet&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here is the content of a page:</p>
  
  <pre><code>&lt;ion-content&gt;
    &lt;div class="view-frame" fxLayout="column"&gt;
      &lt;div class="scrollbar-y" (swipe)="swipeEvent($event)"&gt;
        &lt;ion-list class="list-padding"&gt;
          &lt;ion-item *ngFor="let leader of board" class="list-item"&gt;
            &lt;!-- item --&gt;
          &lt;/ion-item&gt;
        &lt;/ion-list&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Here is the css in question:</p>
  
  <pre><code>.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;
  }
  </code></pre>