Rows overlay each other in firefox

[ruegenbfr]

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
In firefox (version ≥126) the table rows overlay each other when scrollbarV=true and angular ≥14 is used.
See:

Expected behavior
The table rows should not overlay each other.
See:

Reproduction of the problem
Use code:

        <ngx-datatable
            [rows]="rows"
            [rowHeight]="20"
            [columns]="columns"
            [headerHeight]="30"
            [scrollbarV]="true"
            [footerHeight]="30"
        >
        </ngx-datatable>

The arrays rows and columns are not given here. rows should contain at least 2 elements.

See demo

What is the motivation / use case for changing the behavior?
In my eyes this is a regression bug.
The table works fine in Chrome, Edge, Safari.
The table works fine in firefox v<126 or with angular <14.
The virtualization feature (scrollbarV="true") is important for large datasets.

Please tell us about your environment:

• Table version:
  20.1.0

• Angular version:
  14, 15, 16, 17, 18

• Browser:
  Firefox v≥126

• Language:
  all

[mrkava]

Have same issue

[Anhoro]

The same issue. ~1 month ago it was fine. Here are some observations. It looks like 'transform' is not applied anymore in Firefox.

[soroush-gh]

Have same issue

[Anhoro]

Using [virtualization]="false" on the table can temporarily solve the stacking problem until the Firefox fix (but leads to performance issues).

[DDDarylll]

Using [virtualization]="false" on the table can temporarily solve the stacking problem until the Firefox fix (but leads to performance issues).

did you find any solution?

[tiborux]

We are facing the same problem, we tried to fixed it adding a polyfill to remove the -moz-transform but thats where the party began. We found more problems in our code if we do that, so right now, our animations in firefox are broken and we have to disable some of them only in firefox.

Its like the -moz-transform is not being applied:

[tiborux]

I found and issue related with this in mozilla: Mozilla Bugzilla #1898455

However, after reading that post, someone pointed out that there are some forks of the library. I found this one where they update the library with multiple fixes:
siemens/ngx-datatable

With that fork, everything works as expected.

[kylebradshaw]

@tiborux which version of angular are you running? the siemens fork wasn't working for me with NG15.2.7 though I'll attempt again

[desmondblue]

@tiborux which version of angular are you running? the siemens fork wasn't working for me with NG15.2.7 though I'll attempt again

Checked package-lock for the fork. You would have to use angular 17 to make use of it.

[fh1ch]

@tiborux which version of angular are you running? the siemens fork wasn't working for me with NG15.2.7 though I'll attempt again

@kylebradshaw I'm one of the maintainers of said fork. Since we got approached by a few people with Angular 15 projects, we also released a backported version, which should support it: https://github.com/siemens/ngx-datatable/blob/21.3.2/docs/changelog.md#2132. I hope that helps.

[kylebradshaw]

@tiborux which version of angular are you running? the siemens fork wasn't working for me with NG15.2.7 though I'll attempt again

@kylebradshaw I'm one of the maintainers of said fork. Since we got approached by a few people with Angular 15 projects, we also released a backported version, which should support it: https://github.com/siemens/ngx-datatable/blob/21.3.2/docs/changelog.md#2132. I hope that helps.

you guys rock, thanks!