I have a page with a VirtualScroll. Virtual items in the VirtualScroll get mispositioned when I change the orientation to landscape.
As shown in the above screenshot, some of the items are on top of another items.
Here is the rendered html. I see mispositioned items has wrong values for the css property
translate3d
.
This happens only on wider screens (similar to iPhone x or Galaxy s8). Tested on a iPhone 6 and worked fine.
This can be reproduced in Chrome too. Set to responsive mode and increase the width little by little. After a certain width, items get overlapped.
Please help me. I want to get this fixed.
Here is my html code of the VirtualScroll
<ion-list [virtualScroll]="itemList" approxItemHeight="90px" approxItemWidth="100%">
<button ion-item detail-none no-lines (click)="openItem()" *virtualItem="let item" no-padding no-margin style="height: 90px;width: 100%;">
<ion-row>
<ion-col class="col-small">
<div class="severity-circle-div"></div>
</ion-col>
<ion-col>
<ion-row class="line-clamp-2">{{item.index}} {{item.title}}</ion-row>
<ion-row class="row-small">
<ion-col text-left no-margin>{{item.type | titlecase}}</ion-col>
<ion-col text-center no-margin>{{item.status | titlecase}}</ion-col>
</ion-row>
</ion-col>
</ion-row>
</button>
</ion-list>
Ionic version: 3.9.2
Device: iPhone X
Thanks.