VirtualScroll issue in iPhone X (and similar screens)

@nirman99 wrote:

I have a page with a VirtualScroll. Virtual items in the VirtualScroll get mispositioned when I change the orientation to landscape.

Screen Shot 2018-06-26 at 2.00.38 PM.png888x422 64.2 KB

As shown in the above screenshot, some of the items are on top of another items.

Screen Shot 2018-06-26 at 2.02.45 PM.png855x417 124 KB

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 reproduces in Chrome too. Set to responsive mode and increase the width little by little. At 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.

Posts: 1

Participants: 1

Read full topic