The `table` mode is easy to corrupt data with many items

[francoishill]

Steps to reproduce:

• Download latest aurelia-skeleton from https://github.com/aurelia/skeleton-navigation and go into skeleton-esnext dir
• Install deps with npm install and jspm install
• Install this plugin jspm install aurelia-ui-virtualization
• Enable plugin in main.js with aurelia.use.plugin('aurelia-ui-virtualization');
• Replace welcome.js and welcome.html with the respective code below
• Run the local web server with gulp watch and browse to the url it prints out - probably http://localhost:9000
• Now once the data loaded scroll down and up a few times to see the data getting into a weird order

I am using chrome v51.0.2704.103 m for this but also same issue with Firefox 47.

This bug does not occur with non-table mode. So by replacing the table code in welcome.html with <div virtual-repeat.for="item of items"> ${item.Name} -- ${item.Value} </div>, however, works perfectly.

welcome.js:

export class Welcome {
  constructor() {
    let items = [];
    for (let i = 0; i < 10000; i++) {
      items.push({
        Name: `Item ${i}`,
        Value: `My value is ${i*10}`,
      })
    }
    this.items = items;
  }
}

welcome.html

<template>
  <section class="au-animate">
    <table>
      <tr virtual-repeat.for="item of items">
        <td>${item.Name}</td>
        <td>${item.Value}</td>
      </tr>
    </table>
  </section>
</template>

[martingust]

@francoishill Thanks for great bug report. I'll look into this.

[francoishill]

Awesome, looking forward!

[martingust]

@francoishill Fix is in master