QTable with virtual scrolling loses border-bottom with many rows

[delphi-sucks]

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

[RamonDonadeu]

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.

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 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.

[rickxu0423]

Encountered similar issue here, if you set a height for the table and have very few rows (eg: height: 400px with 2 rows), the border-bottom is missing from for the very last row. https://codepen.io/Rickxu0423/pen/azogGKb

[FangHanZreo]

在这里遇到了类似的问题，如果您为表格设置了高度并且行数很少（例如：height： 400px 有 2 行），则最后一行缺少 border-bottom. https://codepen.io/Rickxu0423/pen/azogGKb

This is not a bug, but rather an issue where the last row does not have a border-bottom set. When the table is fully populated (stretched to fill its container), the border of the last row overlaps with the border-top of q-table__bottom. This results in the following visual effect:

[FangHanZreo]

I am also experiencing an issue with table borders not displaying correctly. Reproduction link.

Reproduction Conditions:

1. Use position: sticky to fix columns.
2. Make the content inside q-td relatively tall (40px).
3. Zoom the webpage to set window.devicePixelRatio to 1.25.

Solution: Adjusting the default line height of q-td can resolve this issue.

Personal Analysis: This appears to be a browser rendering issue.