When using Ionic v3 to develop a hybrid app, I encountered an issue where ion-items within an ion-list generated using *ngFor are not scrollable on iOS devices. Strangely, this problem does not occur on Android devices.
Here is the HTML code snippet:
<ion-list class="scroll-content">
<ion-item *ngFor="let diaryEvent of diaryEvents">
<h2>{{ diaryEvent.title || "None" }}</h2>
<h3>{{ moment(diaryEvent.day).format("YYYY-MM-DD") }}</h3>
<p>{{ diaryEvent.notes }}</p>
<p>
<ion-icon *ngIf="diaryEvent.videoFilePath" name="videocam" (click)="eventPopup($event, diaryEvent)"></ion-icon>
<ion-icon *ngIf="diaryEvent.audioFilePath" name="mic" (click)="eventPopup($event, diaryEvent)"></ion-icon>
</p>
<span (click)="viewDiaryEvent(diaryEvent)">
<u>View</u>
<ion-icon name="eye"></ion-icon>
</span>
<span (click)="editEvent(diaryEvent)">
<u>Edit</u>
<ion-icon name="create" ></ion-icon>
</span>
</ion-item>
And here is the accompanying CSS:
.scroll-content{
overflow-y:scroll !important;
height:88vh;
}
I am hoping to find a solution that will allow for smooth scrolling on iOS devices similar to what is experienced on Android devices. Any help or guidance would be greatly appreciated as I have been struggling with this issue for several days now.
If there are any errors in my question format or language, please forgive me as this is my first time posting here.
Thank you in advance.