Suggestion: change padding-top & padding-bottom of the container

[felixmosh]

Hi,

I've investigated how virtuallization of Instagram works and saw that they are not using position: absolute at the children & not updating children positioning / styles at all, instead they changing padding-top & padding-bottom of the parent container! (SUPER COOOL 🤩).

WDYT? can we refactor this lib to something similar?

[clauderic]

This is do-able, but I'm not clear on what the benefits would be. Have you tested the performance of this approach over the current approach?

[felixmosh]

The benefit is that you are not using absolute positioning on the items, that means that the items will have native flow inside the container.

[clauderic]

You still need to provide exact height measurements for every single item, and you won't be able to use margin between the items, so I'm still not sure I see a clear benefit

[felixmosh]

There is margin between items in Insta & as you see there is no explicit height on the container but it derived, so there is a possibility to allow overflow... And it still work!

Additional benefite of native flow is the support for RTL in horizontal list for free.

[felixmosh]

Think of it, it not requires overflow: hidden & height on the wrapper, no need for position:absolute + height on each item...

[felixmosh]

I see that twitter are doing the same thing