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.

[smakinson]

The way I had it set up previously using max-height: 100% was similar to this:

https://codepen.io/smakinson/pen/pojXNWe

[andrewpskelton]

I get this issue occasionally in Firefox (on macOS) when calling scrollToBottom. Whenever it happens, the offset + clientSize calculation is always 1px greater than scrollSize.

In my case, all of the data is already loaded so I don't think it's an issue with data changing while scrolling. The scroll list has a height of 100% and is a child of a flex container.

The #277 fix does prevent the issue from happening, but I understand that the check is required there for iOS scroll-spring-back behaviour.

[tangbc]

Whenever it happens, the offset + clientSize calculation is always 1px greater than scrollSize.

@andrewpskelton thank you providing this infomation.

If so, maybe problem comes from here:

vue-virtual-scroll-list/src/index.js

Line 105 in f8c6a76

return root ? Math.ceil(root[this.directionKey]) : 0

[tangbc]

I change client and scroll size both use Math.ceil: f706df4

Can you see this problem solved?

[tangbc]

Or trying to offset + clientSize > scrollSize + 1

[andrewpskelton]

@tangbc using Math.ceil doesn't seem to make a difference, but offset + clientSize > scrollSize + 1 stops the issue from happening.

[tangbc]

Published in v2.2.9, see if solved.

[andrewpskelton]

Yes it all seems to be fine for me in v2.2.9. Thanks!