Ngx-datatable: Pinning looks slugish on browsers other than Chrome

[santialbo]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Scrolling with pinned columns is not smooth. See animation below

http://imgur.com/a/qrHgH

Expected behavior
I'd expect it to be smoother, like it is on Chrome

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 9.1.x
  

• Angular version: 4.1.x
  

• Browser: Firefox 53 | IE 11 | Edge
  

[kevinsar]

I am having this issue as well in Firefox and IE, gonna try to fork and explore a fix on my own. I'll post if I find anything!

[santialbo]

Awesome @kevinsar, after digging a little bit I noticed that the header and the body of the table use different strategies for displaying pinned columns. Maybe if we could use the header strategy in the body, we could solve this issue.

[santialbo]

Probably related to this https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

[evermax]

Hi, I am experiencing the same issue too.
I would also like to point out that the scrolling position of header has a delay in regard to the body. It is also happening only on other browsers than Chrome.

[kevinsar]

@santialbo yeah I noticed that error as well when I was taking a look at a simple table implementation here: https://jsfiddle.net/RMarsh/bzuasLcz/3/

When you start scrolling, firefox gives you a warning linking to the page your provided.

Although, in that simple example, even with added many more columns, the performance was acceptable. I wonder if it has something to do with ngx-datatables using transform instead of a simple 'left' still has something to do with it.

[amcdnl]

Let me know if you guys find the issue.

I think the writing is on the wall that I'm going to need to implement synthetic scrollbars. These type of scrolling issues are a nightmare to synchronize.

These guys did a great job on the scrollbars and probably look to that for inspiration - http://facebook.github.io/fixed-data-table/example-column-groups.html

[ccgitgit]

I have this issue when I use ionic2 for mobile apps.
P.S. pin and striped css can not work together perfectly

[ccgitgit]

Pin and striped CSS issue:
change material.css (line 21)

  .ngx-datatable.material.striped .datatable-row-odd {background: #eee; }

to:

.ngx-datatable.material.striped .datatable-row-odd,
.ngx-datatable.material.striped .datatable-row-odd .datatable-row-left,
.ngx-datatable.material.striped .datatable-row-odd .datatable-row-right{
    background-color: #eee; }

so it can overide the #FFF background-color in material.css(line 84)

[pabloli]

Hi all
I found this maybe it's help...
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Look at sticky.
Someone try it?

[Jotakuun]

The problem with sticky position it's not supported in Edge browser yet

[realshadow]

Hey, did someone manage to find solution for this?

[lupu60]

And now in 2021 this issue is still open. 😞

[singhinderpal]

Still Open!