DataTable with Virtual Scroll still flickers #4029

aabruc · 2017-09-26T10:38:36Z

[X] bug report

This is a continuation of ticket
https://github.com/primefaces/primeng/issues/3377
because it is closed, but the bug isn't completely fixed yet.

Current behavior
When using the table with virtual scroll, if you scroll down the table with mousewheel and scroll slowly, it's still flickering and jumping. So much so that you feel the content is not loaded properly.

Expected behavior
Load the data to the table without flickering and jumping.

Minimal reproduction of the problem with instructions
See #3377

What is the motivation / use case for changing the behavior?
After the bugfix 3377 it works much better:
The scrollbar size is calculated right, the content is loaded correctly, the last element can be reached and it stops at the last element, but it needs an improvement: When you scroll with mousewheel and scroll slowly, it's still flickering and jumping. So much so that you feel the content is not loaded properly.

Please tell us about your environment:

Windows7, node.js, npm
Angular version: 4.0 +
PrimeNg version: 4.2.1 (with the 3377 bugfix)
Browser: Chrome, Firefox, IE

filip12345678910 · 2017-09-26T11:18:43Z

I think that jumping and flickering are not very precise descriptions. For me the bug works in one of two ways: 1) When I scroll slowly over the end of the first page, the next page gets loaded, then (immediately) the next page, then (immediately) the next one, until the last. And then it stops. Or 2) after I scroll slowly over the end of the first page, the second gets loaded, then the first one, then the second one and so on forever.

aabruc · 2017-09-26T11:29:28Z

Thx filip for your addition.
I think the more precisely we describe the problem, the faster and more accurately it can be fixed :)

Please everyone who adds a comment ensure that you use the new PrimeNg version 4.2.1 with the 3377 bugfix.

ekoch · 2017-09-26T12:38:38Z

In my case, under Chrome, it 'works' when the data is loaded slowly (i.e. from request to the server). But:
1/ in the case It is loaded from a local cache in typescript, it jumps from page 1 to page 2, and then from page 2 to page 1 infinitely, and
2/ when it 'works' (data loaded from the server), I can see previous data before they are replaced by new ones (i.e. I scroll from id 1 to 40, then I can see id 21, 22, ... during about half a second, and then is replaced by the 41, 42, ...). So even in this case, the behavior is not pleasant
[Important note: try with true Ids, not Indexes like in the example page]

Tested with PrimeNg version 4.2.1, Angular 4.2.6 and Chrome 61.0.3163.100 (Ubuntu)

mselerin · 2017-09-29T15:18:53Z

Same issue here... :-/

After some investigations, it might be a bug inside the onBodyScroll function inside ScrollableView.
Inside the condition
if(this.scrollBody.scrollTop + viewport > parseFloat(this.scrollTable.style.top) + tableHeight || this.scrollBody.scrollTop < parseFloat(this.scrollTable.style.top))
the virtualScroll event is fired and, just after, the this.scrollTable.style.top is recalculated.

But, I think that this line rethrow another scroll event, isn't it ?

Source file : datatable.ts:378

mselerin · 2017-10-03T12:56:54Z

Some more details...

I've added a log inside onBodyScroll to watch scrollBody.scrollTop and scrollTable.style.top.

In FireFox, I get values like these :

scrollBody.scrollTop: 423, scrollTable.style.top: 0
scrollBody.scrollTop: 648, scrollTable.style.top: 380 // Pagination occurs
scrollBody.scrollTop: 650, scrollTable.style.top: 380

As you can see, the scrollTop value continues to grow just as expected.

In Chrome, for the same dataTable, I get these :

scrollBody.scrollTop: 329, scrollTable.style.top: 0
scrollBody.scrollTop: 363, scrollTable.style.top: 0
scrollBody.scrollTop: 168, scrollTable.style.top: 360 // Pagination occurs
// Start looping... :-(
scrollBody.scrollTop: 272, scrollTable.style.top: 0
scrollBody.scrollTop: 632, scrollTable.style.top: 0
scrollBody.scrollTop: 272, scrollTable.style.top: 360
scrollBody.scrollTop: 632, scrollTable.style.top: 0
scrollBody.scrollTop: 272, scrollTable.style.top: 360

For some reason, the scrollTop value goes from '363' to '168'. I would have expected it to be something like '640' just as in FireFox...

Sadly, Google wasn't my friend for this one.

machfalcon · 2017-10-04T19:15:35Z

Created a plunker which displays one of the scrolling issues that I've encountered (using primeng version 4.2.1): https://embed.plnkr.co/R9Trajo3iZYjKXg2fBH9/

machfalcon · 2017-10-05T13:07:50Z

After further investigation, I was able to reproduce another issue. If the rowTrackBy function is used, the table jumps when scrolling with the scroll bar buttons:
https://embed.plnkr.co/o9Go6P8Bf1GbVPXj8kq8/

jdp80 · 2017-10-05T16:52:47Z

I believe this is caused by Scroll Anchoring, enabled from Chrome 56 onwards.

Setting overflow-anchor: none on .ui-datatable-scrollable-body stops the continuous jumping, although some issues still remain with old data being visible momentarily.

machfalcon · 2017-10-05T17:42:25Z

@jdp80 great find regarding Scroll Anchoring.

I'm currently working around the issue with old data being visible by templating the cell content:
<ng-template let-data="rowData" let-index="rowIndex" pTemplate="body">
<span *ngIf="index == data.index">{{data[col.key]}}</span>
</ng-template>

All of my data rows have an absolute index that I'm also using as the data key.

mselerin · 2017-10-06T07:47:58Z

@jdp80 awesome ! :-)

I've added this css rule and it works on Chrome now

.ui-datatable-scrollable-body {
  overflow-anchor: none;
}

@machfalcon I'll also try your workaround later.

Nice job everyone !

ekoch · 2017-10-06T10:00:31Z

@jdp80 Great solution!
I opened an issue for the old data visible : #4096

laurentperroteau · 2017-10-09T07:40:29Z

@jdp80 solution works , thanks

rodolfojnn · 2017-10-12T20:05:55Z

Same here. Using the table with virtual scroll and ~1000 rows, it's still flickering and jumping. I recorded a video to show the effect. After a while (and some mouse wheels), the grid seems to jump indefinitely from one position to another in a infinite loop:

https://streamable.com/rg3ku

Version: 4.2.1

<p-dataTable
        dataKey="ncm"
        selectionMode="single"
        scrollable="true"
        scrollHeight="500px"
        virtualScroll="virtualScroll"
        [rows]="20"
        [value]="ncms"
        [lazy]="false"
        [totalRecords]="ncms.length"
        (onRowSelect)="frmMainSelect($event)">
        <p-column field="ncm"        header="NCM"></p-column>
        <p-column field="descricao"  header="Descrição"></p-column>
        <p-column field="cest"       header="CEST"></p-column>
        <p-column field="aliq_nac"   header="Alíq.Nacional"></p-column>
        <p-column field="aliq_est"   header="Alíq.Estadual"></p-column>
        <p-column field="aliq_mun"   header="Alíq.Municipal"></p-column>
        <p-column field="aliq_imp"   header="Alíq.Importação"></p-column>
      </p-dataTable>

The css solution .ui-datatable-scrollable-body {overflow-anchor: none;} not work for me.

laurentperroteau · 2017-10-17T14:48:11Z

I.E.: @jdp80 solution (.ui-datatable-scrollable-body) resolve infinite data load on Chrome (@ekoch first point), not data flikers issue on virtualScroll (like this issue and #4096)

cagataycivici · 2017-10-25T19:39:50Z

I've also realized the weird behavior, tried another go, works much smoother now. Would be great if you guys can take it for a test run in upcoming 4.3.0.RC1.

mani301 · 2017-10-26T15:26:30Z

@cagataycivici Did tried with latest version. Working much better than before only in Chrome. Somehow the scrolling in EDGE / Firefox is not loading new set of records anymore. And it ha frozen the view with whitespace after the end of loading of some 40 records.

laurentperroteau · 2017-10-30T08:20:05Z

@cagataycivici Awesome, it's almost perfect ! Like @mani301 said, I see some whitespace on scroll (on IE11).

I.E. : I thing #2950 issue is duplicate

SRICHANDANCHINNAM · 2018-12-01T01:12:03Z

Hello folks,

Lazy loading scroll bar is always showing even after loading all my records....

I tried to fixed the issue... But i can't....

Can you please help me out....

amirdelfan · 2022-04-08T09:05:32Z

Adding next css helps the flickering of the table; I had this problem because I am using flex height for my page.
.p-datatable-wrapper {
...
.cdk-virtual-scroll-viewport {
overflow-anchor: none;
}
}

Beside this issue the header always moves a little when you scroll fast. I have seen this on the PrimeNG sample site too.
Maybe someone also has solution for this?

mellmers · 2023-01-24T10:03:17Z

Adding next css helps the flickering of the table; I had this problem because I am using flex height for my page. .p-datatable-wrapper { ... .cdk-virtual-scroll-viewport { overflow-anchor: none; } }

Beside this issue the header always moves a little when you scroll fast. I have seen this on the PrimeNG sample site too. Maybe someone also has solution for this?

Thank you very much! This workaround is what I needed.

nsaini-05 · 2023-11-05T20:28:35Z

This issue still persists when scrollHeight = "flex" and virtualScroll = "true" when scrolled to end

Gykonik · 2023-11-07T09:05:08Z

Same for me, would love to get a solution

YouskoVladimir · 2023-12-06T16:50:02Z

It looks like the flick happens because the actual item size is bigger than the one specified as virtualScrollerOptions itemSize (for me 50px specified, 56 actual). I specified the size to be bigger than the actual (for me 60px), and it works.

deepmirchandani · 2024-09-05T14:13:26Z

@jdp80 awesome ! :-)

I've added this css rule and it works on Chrome now
.ui-datatable-scrollable-body {
  overflow-anchor: none;
}
@machfalcon I'll also try your workaround later.

Nice job everyone !

@amirdelfan Thanks, its working for me after spend long time

cagataycivici added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Oct 4, 2017

cagataycivici added this to the 4.3 milestone Oct 4, 2017

cagataycivici removed this from the 4.2.3 milestone Oct 19, 2017

cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Oct 20, 2017

cagataycivici added this to the 4.2.3 milestone Oct 20, 2017

cagataycivici self-assigned this Oct 20, 2017

cagataycivici added confirmed and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Oct 25, 2017

cagataycivici closed this as completed in ebfd396 Oct 25, 2017

NynaPykulska mentioned this issue Nov 6, 2024

tabMenu breaks table virtual scroll calculations #15556

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DataTable with Virtual Scroll still flickers #4029

DataTable with Virtual Scroll still flickers #4029

aabruc commented Sep 26, 2017

filip12345678910 commented Sep 26, 2017

aabruc commented Sep 26, 2017 •

edited

Loading

ekoch commented Sep 26, 2017 •

edited

Loading

mselerin commented Sep 29, 2017 •

edited

Loading

mselerin commented Oct 3, 2017

machfalcon commented Oct 4, 2017

machfalcon commented Oct 5, 2017

jdp80 commented Oct 5, 2017 •

edited

Loading

machfalcon commented Oct 5, 2017

mselerin commented Oct 6, 2017 •

edited

Loading

ekoch commented Oct 6, 2017

laurentperroteau commented Oct 9, 2017

rodolfojnn commented Oct 12, 2017 •

edited

Loading

laurentperroteau commented Oct 17, 2017

cagataycivici commented Oct 25, 2017 •

edited

Loading

mani301 commented Oct 26, 2017

laurentperroteau commented Oct 30, 2017

SRICHANDANCHINNAM commented Dec 1, 2018

amirdelfan commented Apr 8, 2022

mellmers commented Jan 24, 2023

nsaini-05 commented Nov 5, 2023 •

edited

Loading

Gykonik commented Nov 7, 2023

YouskoVladimir commented Dec 6, 2023 •

edited

Loading

deepmirchandani commented Sep 5, 2024

DataTable with Virtual Scroll still flickers #4029

DataTable with Virtual Scroll still flickers #4029

Comments

aabruc commented Sep 26, 2017

filip12345678910 commented Sep 26, 2017

aabruc commented Sep 26, 2017 • edited Loading

ekoch commented Sep 26, 2017 • edited Loading

mselerin commented Sep 29, 2017 • edited Loading

mselerin commented Oct 3, 2017

machfalcon commented Oct 4, 2017

machfalcon commented Oct 5, 2017

jdp80 commented Oct 5, 2017 • edited Loading

machfalcon commented Oct 5, 2017

mselerin commented Oct 6, 2017 • edited Loading

ekoch commented Oct 6, 2017

laurentperroteau commented Oct 9, 2017

rodolfojnn commented Oct 12, 2017 • edited Loading

laurentperroteau commented Oct 17, 2017

cagataycivici commented Oct 25, 2017 • edited Loading

mani301 commented Oct 26, 2017

laurentperroteau commented Oct 30, 2017

SRICHANDANCHINNAM commented Dec 1, 2018

amirdelfan commented Apr 8, 2022

mellmers commented Jan 24, 2023

nsaini-05 commented Nov 5, 2023 • edited Loading

Gykonik commented Nov 7, 2023

YouskoVladimir commented Dec 6, 2023 • edited Loading

deepmirchandani commented Sep 5, 2024

aabruc commented Sep 26, 2017 •

edited

Loading

ekoch commented Sep 26, 2017 •

edited

Loading

mselerin commented Sep 29, 2017 •

edited

Loading

jdp80 commented Oct 5, 2017 •

edited

Loading

mselerin commented Oct 6, 2017 •

edited

Loading

rodolfojnn commented Oct 12, 2017 •

edited

Loading

cagataycivici commented Oct 25, 2017 •

edited

Loading

nsaini-05 commented Nov 5, 2023 •

edited

Loading

YouskoVladimir commented Dec 6, 2023 •

edited

Loading