Table shows no rows if you scroll too fast

[catsalive]

I'm submitting a bug report

• Library Version: 1.0.0-beta.7

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 10.16.3

• NPM Version: 6.9.0

• JSPM OR Webpack AND Version webpack 4.27.0

• Browser: Chrome 78.0.3904.87

• Language: TypeScript 3.6.3

Current behavior: This no longer works again (if you scroll slightly too fast the rows disappear, the height of the bottom placeholder tr tag appears to be too high):

<table style="width:500px; height: 200px; overflow-y:scroll; display:block">
  <tr virtual-repeat.for="user of users" style="width:500px; height: 50px">
    <td>
      ${user.avatar_url}
    </td>
  </tr>
</table>

Expected/desired behavior:

• Do au new to create a new skeleton project
• remove the overflow attributes from the page-host css class
• paste in the above templating into welcome.html
• throw an array into welcome.ts to iterate on
• run the project
• scroll quickly to the bottom
• The table rows show as expected

[bigopon]

@catsalive the issue you face is probably because the difference in amount of work browser has to do. For table/tr, its relatively higher than div, and thus could make some of our callback in the plugin fire too early, thus having wrong calculation. This will be even more difficult on Firefox as they may have flakier timing implementation. I would suggest doing a manual event dispatch on one element to re-trigger the calculation. You can find the example in the readme.

Please note that you will have to scroll very very fast, continously for this to happen (im guessing)

[catsalive]

@bigopon Thank you for responding so quickly. It is true, that very similar code, but with divs has no issues like this. I did not have to scroll very fast at all to get the issue to come up and I only have 242 rows. Can you point out the manual event dispatch you're referring to in the readme? Is that the infinite-scroll-next attribute?

[bigopon]

@catsalive Sorry I forgot about this. What you can do is to dispatch one of the following 2 events:

export declare const VirtualizationEvents: {
    scrollerSizeChange: "virtual-repeat-scroller-size-changed";
    itemSizeChange: "virtual-repeat-item-size-changed";
};

on the scrolling element. if it's a <div/> containing a table, then you would do:

myDiv.dispatchEvent(new CustomEvent(VirtualizationEvents.scrollerSizeChange));

[sheetalvarshney38]

@bigopon I am still facing this issue, quick scroll works fine on chrome but not on other browsers. I tried manual event dispatch as you suggested but it won't work either. Can you help!!

[bigopon]

it's unlikely that this is actionable. Even for native scrolling, browsers struggle to keep up if you scroll too fast. You can try to open a long long page, and then scroll really fast up and down, browser can't keep up with that basic functionality sometimes.