Virtualized list jumps on scroll: `data-warper-viewport` translates in multiples of 15 while the row height is 38

[johanrd]

1. Go to the demo: https://warper.tech/one-million-rows/index.html
2. Scroll down, and experience jumping of the rows when the virtualization starts and changes:

b.mov

Possibly caused by the translateY(15px) on the data-warper-viewport being multiples of 15, while the row height is 38?

<div data-warper-viewport="true" style="position: absolute; top: 0px; left: 0px; width: 100%; transform: translateY(15px); will-change: transform;">
	<div data-index="1" style="position: absolute; top: 0px; left: 0px; width: 100%; contain: layout style paint; will-change: transform; transform: translateY(0px); height: 38px;"><div style="display: grid; grid-template-columns: 70px 1fr 1fr 80px 90px 100px 80px; align-items: center; padding: 0px 16px; border-bottom: 1px solid rgb(26, 26, 36); font-size: 11px; height: 100%; box-sizing: border-box; color: rgb(228, 228, 231); gap: 8px;"><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(82, 82, 91);">1</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(113, 113, 122);">0x7e5c3a18f6d4b290</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(161, 161, 170);">2026-01-30 21:38:29</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(168, 85, 247);">swap</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px;"><span style="display: inline-flex; align-items: center; gap: 5px;"><span style="width: 5px; height: 5px; border-radius: 50%; background: rgb(234, 179, 8); flex-shrink: 0;"></span>pending</span></div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(0, 212, 170);">1.37 ETH</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(113, 113, 122);">21031</div></div></div>
	<div data-index="2" style="position: absolute; top: 0px; left: 0px; width: 100%; contain: layout style paint; will-change: transform; transform: translateY(38px); height: 38px;"><div style="display: grid; grid-template-columns: 70px 1fr 1fr 80px 90px 100px 80px; align-items: center; padding: 0px 16px; border-bottom: 1px solid rgb(26, 26, 36); font-size: 11px; height: 100%; box-sizing: border-box; color: rgb(228, 228, 231); gap: 8px;"><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(82, 82, 91);">2</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(113, 113, 122);">0xeca86420eca86420</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(161, 161, 170);">2026-01-30 21:38:27</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(0, 212, 170);">stake</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px;"><span style="display: inline-flex; align-items: center; gap: 5px;"><span style="width: 5px; height: 5px; border-radius: 50%; background: rgb(239, 68, 68); flex-shrink: 0;"></span>failed</span></div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(0, 212, 170);">2.74 ETH</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(113, 113, 122);">21062</div></div></div>
	<div data-index="3" style="position: absolute; top: 0px; left: 0px; width: 100%; contain: layout style paint; will-change: transform; transform: translateY(76px); height: 38px;"><div style="display: grid; grid-template-columns: 70px 1fr 1fr 80px 90px 100px 80px; align-items: center; padding: 0px 16px; border-bottom: 1px solid rgb(26, 26, 36); font-size: 11px; height: 100%; box-sizing: border-box; color: rgb(228, 228, 231); gap: 8px;"><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(82, 82, 91);">3</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(113, 113, 122);">0x5af49e38d27c16b0</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(161, 161, 170);">2026-01-30 21:36:21</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(34, 197, 94);">mint</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px;"><span style="display: inline-flex; align-items: center; gap: 5px;"><span style="width: 5px; height: 5px; border-radius: 50%; background: rgb(0, 212, 170); flex-shrink: 0;"></span>confirmed</span></div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(0, 212, 170);">4.11 ETH</div><div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0px; color: rgb(113, 113, 122);">21093</div></div></div>
</div>

3. This does not happen if you set the item size to 100k instead of 1M rows.

Chrome 144, mac Os

[itsmeadarsh2008]

I got it, it works on the chunking process. I had delegated the issue to Copilot, but it didn't solve it well. It is written in such a way as to render a high number of rows. Thus, jumping of rows is observed.

Edit: I have it make it dynamic I guess.