petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.16k stars 299 forks source link

[BUG] Wrong item position after scroll to index on scaled list #1024

Closed itwaze closed 8 months ago

itwaze commented 8 months ago

When the list is scaled by transform: scale() the size of the list has wrong sizes in order to scroll to specific index. Comparing to scaled list with font-size: clamp(), in this way it works properly with no issues and can be scrolled to specific index.

Reproduction codesandbox

To Reproduce Steps to reproduce the behavior: 1) Initially you will see font-size: clamp implementation, try Scroll To 1000, you will be able to scroll to the last element.

fontSize: "1.27em",
// transform: "scale(1.27)",
// transformOrigin: "top center",

2) In order to switch to transform: scale implementation, comment fontSize: "1.27em" in line 84 and uncomment next 2 lines with:

// fontSize: "1.27em",
transform: "scale(1.27)",
transformOrigin: "top center",

then Scroll To 1000, you will see that it wasn't scrolled to the last one.

Expected behavior Scroll to index will work even on scaled (by transform: scale()) list.

Screenshots 1) scroll to 1000 with clamp: image

2) scroll to 1000 with 'scale': image

petyosi commented 8 months ago

Yeah, I see what you're describing, but no, I don't see a way to solve this; the dimensions measured are not affected by the scaling.