search

NeXTs / Clusterize.js

Tiny vanilla JS plugin to display large data sets easily
https://clusterize.js.org
MIT License
7.22k stars 414 forks source link

Sometimes on scrolling down the contents starts rerending continously #176

Closed ansari9546 closed 2 years ago

ansari9546 commented 4 years ago

Sometimes on scrolling down the list the cluster starts re-render the data continously. Try to debug but when the console opens it mostly automatically fixed. And sometime from debugginf I find out that the cluster calculates the height and starts renders data continously. I loads data asynchrously and changes the states of data using cluster.update method. I don`t have fixed scenario for this. If anyone have solution please help me

Ladvace commented 4 years ago

does it start flickering?

ansari9546 commented 4 years ago

Yes it does.

Ladvace commented 4 years ago

yeah also to me and I'm trying to figure out the problem

ansari9546 commented 4 years ago

At this moment I have solved it for the time being to get the scroll event and on that basis I tried to refresh the cluster. Somehow this potential fix works for me

Ladvace commented 4 years ago

I will try

Ladvace commented 4 years ago

actually don't seems to working for me

ansari9546 commented 4 years ago

cluster.getScrollProgress() helps me to tackle the issue to flicker. I used my logic further to detect whether it is flickering or not.

Ladvace commented 4 years ago

and when u detect it what did you do?

Ladvace commented 4 years ago

i tried using .getScrollProgress() but i just get an initial 0, if I scroll it doesn't change

ansari9546 commented 4 years ago

use cluster.refresh() to solve the flickering

ansari9546 commented 4 years ago

If the listing starts flickering then the getScrollProgress() will be called continously. Now whether you will get the same scrollIndex of fluctuated between 2-3 index values. when you get that simply refresh the cluster. It will solve the problem of flickering.

Ladvace commented 4 years ago

for me getScrollProgress() is called just once

FeehGb commented 3 years ago

how did you fix it ?

ansari9546 commented 3 years ago

I fixed it by using the getScrollProgress() if progress remains the same on getting the event then I call the custerize.refresh() event. this trick works well for me

FeehGb commented 3 years ago

Can you show me in the code where did you put getScrollProgress to detect it. Thanks

NeXTs commented 3 years ago

Hello guys Could you provide a demo at codepen?

ansari9546 commented 3 years ago

@FeehGb you can use the below demo link that shows how I have tried to fix this issue. https://codepen.io/arsalanansari9546/pen/KKgajWa

FeehGb commented 3 years ago

thanks. It will help me a lot.

fmp777 commented 2 years ago

@FeehGb you can use the below demo link that shows how I have tried to fix this issue. https://codepen.io/arsalanansari9546/pen/KKgajWa

With your patch, the flickering (rapid redrawing of content) stops, but i also end up with missing data/elements on page. ie: scroll down to bottom, then back to top and the top is missing. Also the bottom of list is missing if you scroll to bottom from top.

This seems like something that needs to be fixed internally, no? I'm not quite clear what the actual problem is.

FeehGb commented 2 years ago

@fmp777 I fixed this problem. I set the fixed heigth for each element. https://github.com/NeXTs/Clusterize.js/pull/181

fmp777 commented 2 years ago

@fmp777 I fixed this problem. I set the fixed heigth for each element. #181

Hmm, i've implemented your patch, and after setting a fixed height for each element, flicker gone, and no missing elements.

Setting a fixed height is not ideal in many situations, i wonder if there's a way around that...

HiveBotNoon commented 2 years ago

This issue is not fixed for me even with the latest version. There are also some more issues that were not there before e.g. if the clusterize has more elements than "rows_in_block" it is not showing the elements at all, only after having called .refresh(true)

Any advice?

fmp777 commented 2 years ago

yea the issue has reappeared - with no updates to Clusterize or other JS - must be a browser change that now brought this problem back

NeXTs commented 2 years ago

yea the issue has reappeared - with no updates to Clusterize or other JS - must be a browser change that now brought this problem back

what browser? OS?

fmp777 commented 2 years ago

yea the issue has reappeared - with no updates to Clusterize or other JS - must be a browser change that now brought this problem back

what browser? OS?

IOS / Chrome / Safari / Webkit

I'm actually not sure if its the same issue, sure feels like it is. But in looking at it, what appears to be happening is when max cluster is hit, the redraw starts with the item at the bottom of the previous list causing the page to appear to "leap" to top. I've been playing with rows_in_block and blocks_in_cluster to see what other kind of results i get, but all I can manage to do is make it "leap" past a bunch of records. Really scratching my head on this one...

fmp777 commented 2 years ago

Nevermind - I had to recode the html/css of each row. While the resulting rows were all same height, there were some oddities due to some outer-element margins.

Once I simplified the per-row html/css, removing floats, margins etc, ensuring the height is unmolested by anything inside the row, the scrolling worked perfectly. Sorry for the bother!