rowPadding mostly applies to bottom?

[courajs]

I'm not 100% on this, but I'm noticing un-rendered white flashes when scrolling upward, and increasing rowPadding doesn't seem to help. It does seem to help with white flashes when scrolling downward.

So, my guess is that the extra rows are only being rendered below the viewport, not above.

I had some trouble following all the math in virtual-each/component.js, but I got the impression that my guess is right.

Would you be open to rendering the extra rows around the viewport instead? It will introduce some more complexity to the scroll state around the top/bottom of the list.

[jasonmit]

Unsure I follow adding padding around viewport. Could you screen grab what you are seeing? (http://www.cockos.com/licecap/ If you need an app for this)

[courajs]

Sure. I'm specifying a rowHeight of 10 in the component:

  {{#virtual-each options
    height=containerHeight
    itemHeight=itemHeight
    rowPadding=10
    as |item actualIndex virtualIndex|
  }}
    ...
  {{/virtual-each}}

As you can see, the 10 rowPadding rows are rendered below the viewport, so scrolling down doesn't show a white flash. But no extra rows are rendered above the viewport, so scrolling up shows a white flash.

A rowPadding of 10 should probably render 5 above and 5 below, or 10 above and 10 below, rather than just 10 below.

[jasonmit]

Agreed, should be buffered in both directions. Happily would accept the change.