Ionic-framework: VirtualScroll rendering bug on first item

[beck24]

Short description of the problem:

First item in some virtualscroll lists is positioned incorrectly.

What behavior are you expecting?

Items should look the same as using a non-virtualscroll ion-list

Steps to reproduce:

1. View list as generated in the plunker
2. 
   
   
   3.
   

<ion-list *ngIf="loadingComplete" [virtualScroll]="data">
        <button ion-item *virtualItem="let item">
            {{ item.title }}

            <p>
                {{ item.description }}
            </p>

            <ion-badge item-right>
                {{ item.value }}
            </ion-badge>
        </button>
    </ion-list>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

https://forum.ionicframework.com/t/rendering-bug-with-virtual-list-items/55769

Which Ionic Version? 1.x or 2.x
Ionic 2 Beta 9

Plunker that shows an example of your issue

I couldn't get plunker to show the same rendering bug my app has, but it creates a slightly different one

With virtualscroll: http://plnkr.co/edit/MIzUzNfogZrGVrxDDXwP?p=preview
Without virtualscroll: http://plnkr.co/edit/xHjwb5OLED4HO1qJ1B0X?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
ios-deploy version: 1.8.2
ios-sim version: 5.0.3
OS: Mac OS X El Capitan
Node Version: v4.2.2
Xcode version: Xcode 7.3.1 Build version 7D1014

[lain-me]

It is the same as https://github.com/driftyco/ionic/issues/6961
What you see is the first element really is there, but underneath, and "some part" of last element or some other junk on top of it. I had different views when the element height differs one from another.

[ChrisGrigg]

I can confirm this, the issue is that the 'tx' attribute on the translate3d property on the element is incorrect. The value is 10px whereas it looks like it should be 0px.

translate3d(10px, 0px, 0px)

All other elements below the top are:

translate3d(0px, ??px, 0px)

Thanks,

Chris

[Ritzlgrmft]

I have the same problem, in my list the buttons have the styles:

transform: translate3d(16px, 1px, 0px);
transform: translate3d(0px, 74px, 0px);
transform: translate3d(0px, 146px, 0px);
transform: translate3d(0px, 218px, 0px);

[Ritzlgrmft]

In my case, it helped to add the following style as a workaround:

ion-list > .item:first-child {
  transform: translate3d(0px, 1px, 0px) !important;
}

But I am confident, the Ionic team can do it in a better way.

[jgw96]

Hello, thanks for opening an issue with us! I am going to close this issue as a duplicate of #6961 . Thanks for using Ionic!