Ngx-datatable: issues with display in chrome 70

[olaf89]

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
There are visual glitches when using ngx-datatable with virtualization in chrome 70

Expected behavior
Should not happen

Reproduction of the problem
Install chrome 70
Go to virtualization demo http://swimlane.github.io/ngx-datatable/#horz-vert-scrolling
Once some row gets focus start moving mouse around it up and down

Please tell us about your environment:
Chrome 70, mac as well as linux

• Table version:
  latest

• Angular version:
  6, 7

• Browser:
  Chrome 70

[pwinstead]

I've also been experiencing this issue in my own forms plus a different graphical glitch where the row background will turn black.

[arczas89]

The same problem here. Mixed issues from first and second post. Chrome 70.

[prativm]

Having Same problem.
Plus ScrollBarV showing only one row. any suggestion on this issue??

[hensleyrob]

Same issue here.

[adjouhri]

Same issue.
Works fine on other browser (Firefox, EDGE)

[tmburnell]

What i have found interesting ... The shadow element does not exist in the DOM.
Even if you delete the original it does not go away.

The shadow actually is tied to the element that it is on top of. And if you do $0 it only shows the correct text ... however if you modify$0.innerHtml the shadow goes away.

My guess angular and chrome shadow DOM are fighting ... but i dont know enough specifics to solve the issue.

[mfjharvey]

I think I've found a fix. I was struggling with this for a while, trying to re-render the table and not getting anywhere mostly because it was glitching intermittently. Eventually I realised that this is just a CSS rendering glitch. The DOM knows exactly where each cell is supposed to be, but the CSS is rendering it inconsistently. If you let the browser know in advance that the rows are expected to have transformations applied, the glitch goes away.

.datatable-row-group {
  will-change: transform;
}

Adding that to your CSS seems to fix the issue. It was always intermittent but since adding that CSS rule, I haven't seen it glitch at all.

[olaf89]

It works! awsome thanks

[tmburnell]

https://bugs.chromium.org/p/chromium/issues/detail?id=905830

[michaeldupuis]

Thank you Matt! That also fixed my redraw issues. Great fix!

[tihiz]

Wow! It is working! That was a really big help!
Thank you mfjharvey!

[Humberd]

@mfjharvey This fix breaks contextMenus if they are applied on rows.

https://stackblitz.com/edit/angular-wohung?file=src%2Fstyles.css.

https://stackoverflow.com/questions/54087658/make-context-menu-from-one-row-be-above-the-next-rows

[Humberd]

Ok, I managed to fix that. When I open context menu I disable the fix and when I hide it I readd the fix.

body:not(.dropdown-opened) .datatable-row-group {
  will-change: transform;
}

onDropdownOpen() {
  document.body.classList.add('dropdown-opened');
}

onDropdownClose() {
  document.body.classList.remove('dropdown-opened');
}

[p-saga]

I am facing an issue where the rows are overlapping when I try to bind the data present in a Subject to the ngx-datatable. The overlapped data is displayed for a short while if any change is made to the content of the Subject, after which the correct data is displayed. Has anybody faced this issue before?