QTable with virtual scrolling loses border-bottom with many rows

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time

MIT License

26.01k stars 3.54k forks source link

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?

Create a QTable with virtual scrolling
Have at least ~400.000 rows
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

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.

quasarframework / quasar