Rerendering bug in table with sticky first column

[ScriptRaccoon]

Describe the bug

I have encountered a bug which happened in a quite complex table layout, but I was able to reproduce it in a very small minimal example.

Please check out this REPL:
https://svelte.dev/repl/dd11e358515a4915ab2a9d83c552ea22?version=4.2.18

As you can see, this is a table that (or actually, whose container) allows horizontal scroll, and the first column is sticky. Also, the columns are snapped. There is a button that toggles the number of rows shown.

Sometimes, however, you cannot scroll back to the left. You can reproduce this bug as follows:

• Open the Page.
• Scroll the table to the right.
• Click the button to see more rows.
• Try to scroll left.

Result: you cannot see Column 2 anymore. When you try to reach that scroll position, it scrolls back.

scroll-bug-minimal.mov

I have a sort of feeling why this is happening, it is rerendering issue. Namely, the number of rows is updated, so the tbody is rerendered. But to have a consistent scroll position, we need to rerender the scroll container as well. This can in fact be done by adding a {#key numberVisibleRows} around everything. This, however, also resets the scroll position, and I do not want to rerender the whole table actually, for performance reasons. (Also, in the actual table I am working on, there are other bugs remaining.) So this is a not a good solution.

I can also remove the bug by not using sticky columns or a table element as well. Just a bunch of divs, and use a scrollable container for columns 2,3,.... so exclude column 1 from there in the first place. But then (a) semantics of the table element is gone, (b) this will require a lot of work (in the actual table I am working on).

I was wondering if there are other, more elegant ways to fix this. I asked on the Discord server (link) but only got a remark that it might just be browser issue. I am not fully sure about that since only after Svelte's rerendering the bug happens.

If this is not a Svelte issue, I am very interested in how to fix this issue anyway.

Reproduction

https://svelte.dev/repl/dd11e358515a4915ab2a9d83c552ea22?version=4.2.18

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 671.80 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.17.0 - /usr/local/bin/node
    npm: 10.8.0 - /usr/local/bin/npm
    pnpm: 8.14.3 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Edge: 113.0.1774.35
    Safari: 17.5
  npmPackages:
    svelte: ^4.2.18 => 4.2.18

Severity

annoyance

[PatrickG]

Happens without svelte as well:
https://codepen.io/PehGeh/pen/NWZqwqv

On the other hand, I can reproduce with Chrome, but not with Firefox on Mac.

On Linux I can reproduce it with Chromium & Firefox.

[ScriptRaccoon]

You are right, it seems to have nothing to do with Svelte. It also happens when I, say, add the classes for the snappy behavior later. I will ask somewhere else then, and close this issue.

And yes, the bug is also present on Firefox, this was my mistake.