Occasional blank rows

[smakinson]

Occasionally I see the rows as blank until I manually scroll. A coworker has noticed the same thing where all the initial items were not visible until scroll. He was in Safari and I am in Chrome. Might there be a case where a redraw is not caused? If its related, I also am calling scrollToBottom when items are added.

[tangbc]

This kind of situation may exist, which should be due to the rendering range calc error caused by scrolling and data change at the same time.

How do you handle data-sources and scroll behavior when your problem occurs?

[smakinson]

I'm pushing objects into an array, then its scrolled to the bottom. Before scrollToBottom is called there is a $nextTick call, possibly 2 if the ref is not available yet. It's a chat, so the first load it's the missed messages, so more than one object is pushed on and then scroll to the bottom. The other times its the individual message coming in.

[tangbc]

Provided a event resize emited with param item id when item updated or mounted, can help this?

[tangbc]

I'm pushing objects into an array, then its scrolled to the bottom. Before scrollToBottom is called there is a $nextTick call, possibly 2 if the ref is not available yet. It's a chat, so the first load it's the missed messages, so more than one object is pushed on and then scroll to the bottom. The other times its the individual message coming in.

Like domo chat-room, is the same problem happen in chat-room?

[smakinson]

I have not noticed it happen on the demo in going back to check it out a bit. I think I need to investigate more since most of the time I don't see it happen.

[smakinson]

I'm noticing it happening in the other users browser when sending messages, but not every time. It scrolled to the bottom as if the messages are there, and I see them in vue DevTools in the message array, but if I look at the <VirtualListItem/> list I do not see one for the messages that should be showing in the empty space.

I haven't figured out exactly how to cause it yet, but is it possible something is occasionally not creating the VirtualListItem(s)?

[tangbc]

Yes, the primary reason is not create item (range not update), but why not update is difficult to find out.

[smakinson]

I have noticed it happens consistently if I scroll up just a little bit and send a message from another browser. It seems to cause it to miss displaying 3 items, but that may depend on other things like height I suppose. Still looking at it in between other tasks.

[smakinson]

One difference I have in my set up is I am using max-height: 100% on the scroller and letting it grow as messages come in from the bottom of a flex wrapper that has align-items: flex-end to keep it at the bottom. Perhaps I'm seeing this difference since I have not set a specific height on the scroller itself?

[smakinson]

seems like adjusting to use fixed height helps, going to have more testing done.

[tangbc]

@smakinson I can't repreduce this bug, can you try this fix #227 in your local (change node_modules source code) and see if it solves?

[smakinson]

I had tried a few things locally in node_modules that didn't seem to work. So far reworking the css in the vue template to use a set height in px instead of the max-height: 100% that I was doing seemed to help, but I'm still waiting on others to do more testing as well, things have been distracting us from the branch using this lately.