issues with display in chrome 70

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular

http://swimlane.github.io/ngx-datatable/

MIT License

4.63k stars 1.68k forks source link

issues with display in chrome 70 #1594

Open olaf89 opened 5 years ago

olaf89 commented 5 years ago

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 commented 5 years ago

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

arczas89 commented 5 years ago

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

prativm commented 5 years ago

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

hensleyrob commented 5 years ago

Same issue here.

adjouhri commented 5 years ago

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

tmburnell commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

It works! awsome thanks

tmburnell commented 5 years ago

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

michaeldupuis commented 5 years ago

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

tihiz commented 5 years ago

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

Humberd commented 5 years ago

@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 commented 5 years ago

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 commented 4 years ago

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?