Position fixed not working on IOS device

Ionic Framework ionic-v3
1

I’ve created 2 divs, one for left side and other for the right. I’ve made the right div fixed by applying css position fixed. The code works fine for browsers and android devices but not on IOS device.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title id="title">Our team</ion-title>
  </ion-navbar>  
</ion-header>

<ion-content>
  <div *ngIf="teams">
    <div class="leftAside">   
        <ion-list *ngFor="let group of groupedContacts;let i=index" class="listClass">    
            <ion-item-divider class="groupLetter" [attr.id]="i" sticky>{{group.letter}}</ion-item-divider>            
            <ion-item *ngFor="let contact of group.contacts;let j=index" [attr.id]="'item-'+i+''+j">
              <a href="mailto:{{contact.node.EmailAddress}}?cc=armen.meyer@pwc.com&subject=I%20have%20a%20question%20about%20your%20publication%20titled:" item-right class="contactIcon mailIcon">
                <img src="assets/icon/contact/Mail-icon-3x-1.png" icon-only class="customIcon"/>
              </a>
              <a href="tel:{{contact.node.ContactNumber}}" item-right class="contactIcon">
                <img src="assets/icon/contact/Phone-icon-3x-1.png" icon-only class="customIcon"/>
              </a>
              <ion-thumbnail item-left>
              <img src={{contact.node.ThumbnailURL}}>
              </ion-thumbnail>
              <h2>{{ contact.node.Name }}</h2>
              <p>{{contact.node.Designation}}</p>              
            </ion-item>      
        </ion-list>      
    </div>
    <div class="rightAside">
    <div class="outerContainer"> 
      <span class="innerContainer">
        <a (click)="scrollToElement(i)" *ngFor="let group of groupedContacts;let i=index" class="alphaScroll"><br>{{group.letter}}</a>      
      </span>
      </div>
    </div>
  </div>
</ion-content>

list-avatar-page {
  ion-note {
    font-size: 12px;
    align-self: flex-start;
    margin-top: 14px;
  }
  p{
    font-size: 9px !important;
  }
  .toolbar-title-md,.toolbar-title-ios{
    font-family: georgia;
    font-style: italic;
    padding-left:0px !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 1.6rem;
  }

  .toolbar-background-md, .toolbar-background-ios{
        background: #757375 !important;
  }   

  .listClass{
    margin-bottom: 10px;
  }

  .groupLetter{
    color: #AD1D22;
    padding-left: 16px;
    position:-webkit-sticky;
    position:sticky;
    border-bottom-color:#757375;
    min-height: 0px !important;
  }  

  .customIcon{    
    height:1.9rem;   
  } 

  .leftAside{
    width:95%;
    display: inline-block;
  }

  .rightAside{
    position:fixed; 
    display: inline-block;
  }

  .alphaScroll{
    color:#353434;
    font-size:11px;
    font-weight: bold;
  }

  .outerContainer{
    display:table;
    height:85vh;
  }

  .innerContainer{
    vertical-align: middle;
    display:table-cell;
    line-height: 80%;
  }

  .input-wrapper{
    display:inline;
  }
   
  .label-md{
    margin-top:5px;
    margin-bottom: 0px;
  }
  .bar-button-default-md, .bar-button-clear-md-default, .bar-button-md-default, .bar-button-default-ios{
        color: white;
    }
  .contactIcon{    
    margin-top:-4rem !important;
    margin-right: 0px !important;
    text-decoration: none;
  }  

  .mailIcon{
    padding-right:0.3rem;
  }
}

The right div has an alphabetic scroll thus it has to be kept fixed. To align the indices vertically center I’ve used multiple divs so as to use vertical-align:middle.

I inspected the app on safari and found out that the div as well as anchor tag area is fixed but the content in it is getting scrolled. Is there any way to keep it fixed on the IOS device too

2

Can you share a plunkr or codepen example.