Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rows overlay each other in firefox #2180

Open
ruegenbfr opened this issue Jun 17, 2024 · 11 comments
Open

Rows overlay each other in firefox #2180

ruegenbfr opened this issue Jun 17, 2024 · 11 comments

Comments

@ruegenbfr
Copy link

ruegenbfr commented Jun 17, 2024

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:
Bildschirmfoto 2024-06-17 um 11 34 02

Expected behavior
The table rows should not overlay each other.
See:
Bildschirmfoto 2024-06-17 um 11 34 17

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
Copy link

mrkava commented Jun 17, 2024

Have same issue

@Anhoro
Copy link

Anhoro commented Jun 19, 2024

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

@soroush-gh
Copy link

Have same issue

@Anhoro
Copy link

Anhoro commented Jun 20, 2024

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

@DDDarylll
Copy link

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
Copy link

tiborux commented Jul 3, 2024

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:

image

@tiborux
Copy link

tiborux commented Jul 4, 2024

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
Copy link

@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
Copy link

@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
Copy link

fh1ch commented Sep 9, 2024

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants