Rendering bug with virtual list items?

Ionic Framework ionic-v3
1

I have a virtual list, and when the page is first rendered the first item in the list is indented relative to the others. Scrolling down and back up fixes the position (presumably because the element is removed and re-rendered). Inspecting the element it’s showing with the style translate3d(16px, 16px, 0px)

Anyone have any idea how to have it render in line with the other items initially?

image

Template:

<ion-list *ngIf="loadingComplete" [virtualScroll]="milestoneService.data">
	<button ion-item *virtualItem="let milestone" (click)="viewMilestone($event, milestone)">
		{{ milestone.title | translate }}
		
		<p>
			{{ milestone.distance | distance }}
		</p>
  		
  		<ion-badge *ngIf="milestone.percentComplete === 100" progress100 item-right>
  			{{ 'progress:complete' | translate }}
  		</ion-badge>

		<ion-badge *ngIf="milestone.percentComplete >= 80 && milestone.percentComplete < 100" progress80 item-right>
  			{{ milestone.percentComplete }}%
  		</ion-badge>
  		
  		<ion-badge *ngIf="milestone.percentComplete >= 60 && milestone.percentComplete < 80" progress60 item-right>
  			{{ milestone.percentComplete }}%
  		</ion-badge>
  		
  		<ion-badge *ngIf="milestone.percentComplete >= 40 && milestone.percentComplete < 60" progress40 item-right>
  			{{ milestone.percentComplete }}%
  		</ion-badge>
  		
  		<ion-badge *ngIf="milestone.percentComplete >= 20 && milestone.percentComplete < 40" progress20 item-right>
  			{{ milestone.percentComplete }}%
  		</ion-badge>
  		
  		<ion-badge *ngIf="milestone.percentComplete < 20" progress0 item-right>
  			{{ milestone.percentComplete }}%
  		</ion-badge>
	</button>
</ion-list>
2 Likes
2

I have the same issue. Also, if I add the the attribute inset to the ion-list, I get a huge gap between the top of the page as well as the indent you are seeing on the screenshot. (My list also fixes itself after scrolling down and back up again, however the huge gap is still there if I use inset).

3

I’m just logging a github issue for it, but I can’t recreate this issue in plunker, but a slightly different one.

// non-virtualscroll

// virtualscroll

Github issue: https://github.com/driftyco/ionic/issues/7059

4

Same issue here. Did we find a solution?

5

I have the same problem

6

I just moved away from virtualscrolled lists in the meantime…