Primeng: DataTable with Virtual Scroll still flickers

Created on 26 Sep 2017 · 18Comments · Source: primefaces/primeng

[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 https://github.com/primefaces/primeng/issues/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

confirmed defect

Source

aabruc

👍3

Most helpful comment

@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.

machfalcon on 5 Oct 2017

👍2

All 18 comments

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.

filip12345678910 on 26 Sep 2017

❤1 👍1

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.

aabruc on 26 Sep 2017

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)

ekoch on 26 Sep 2017

👍2

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 on 29 Sep 2017

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.

mselerin on 3 Oct 2017

👍1

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 on 4 Oct 2017

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/

machfalcon on 5 Oct 2017

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.

jdp80 on 5 Oct 2017

👍1

@jdp80 great find regarding Scroll Anchoring.

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

machfalcon on 5 Oct 2017

👍2

@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 !

mselerin on 6 Oct 2017

@jdp80 Great solution!
I opened an issue for the old data visible : https://github.com/primefaces/primeng/issues/4096

ekoch on 6 Oct 2017

@jdp80 solution works , thanks

laurentperroteau on 9 Oct 2017

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.

rodolfojnn on 12 Oct 2017

👍1

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)

laurentperroteau on 17 Oct 2017

👍1

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.

cagataycivici on 25 Oct 2017

👍1

@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.