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

QTable with virtual scrolling loses border-bottom with many rows #17566

Open
delphi-sucks opened this issue Oct 9, 2024 · 1 comment
Open
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/vite-plugin Bugs related to Vite usage with Quasar kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@delphi-sucks
Copy link
Contributor

What happened?

If one uses a QTable with virtual scrolling and many rows (> 400.000), than the rows lose the border-bottm style after a certain amount of rows when scrolling.

What did you expect to happen?

Every row, regardless of its position, should have the same style and therefore a border-bottom in this case.

Reproduction URL

https://codepen.io/delphi-sucks/pen/oNKzKjj

How to reproduce?

  1. Create a QTable with virtual scrolling
  2. Have at least ~400.000 rows
  3. Scroll to the end
    => Rows don't have a border-bottom anymore compared the the first rows.

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System                        Windows_NT(10.0.22631) - win32/x64
NodeJs                                  20.17.0

Global packages
  NPM                                   10.8.3
  yarn                                  Not installed
  pnpm                                  Not installed
  bun                                   Not installed
  @quasar/cli                           2.4.1
  @quasar/icongenie                     Not installed
  cordova                               Not installed

Relevant log output

No response

Additional context

Chrome 129.0.6668.90

@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/vite-plugin Bugs related to Vite usage with Quasar labels Oct 9, 2024
@RamonDonadeu
Copy link

Adding more info:

It seems like border-bottom-width is treating 0px and 1px as 0px, in this case inspecting the DOM I can see a very tiny border, but it is not visible, the same happens with:

3px 4px 5px -> treated as 4px
7, 8 and 9px as 8px
11px, 12px and 13px as 12px

In fact, looking closely, I can see that, in 1px, 3px, 7px and 11px, the border viewed is like 0.2px bigger than what DOM wants to render.

Captura de pantalla 2024-10-10 a las 9 27 51
You can see that there is a black border overflowing the orange block which is the border.

Then at 4px, 7px, 13px, it is the desired border
And the in 5px, 9px, 13px, the border to render is bigger, than what is rendered
Captura de pantalla 2024-10-10 a las 9 25 58
And here there is a more yellowish part that should be filled black.

Also, the last row to have border-bottom is 349524, even if there are 500000 rows, this behavior starts at the same place.
When you are below row 349525, I can't scroll anymore, it is blocked. I have to scroll two times to unblocking it? (Tried with magic moude) This is so weird.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/vite-plugin Bugs related to Vite usage with Quasar kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

2 participants