Bug when scroll position at the end

[Nes-si]

Hi.
I have a problem with animation of remove when a container scrolling position is at the end (or near the end). In this case the animated element shifts down by its height.
I can illustrate it by screencasts.
Normal case: scrolling position is higher than end
Wrong case: scrolling position is at the end

[joshwcomeau]

Ah, thanks for opening the issue - the screen casts are super helpful!

I suspect this will be a tricky one to solve, though :(. It seems like the browser's default behavior of sticking to the bottom of the scroll position will be tough to work around.

As a hacky bandaid fix, you could maybe offset the user's scroll position by 1px before the animation starts, using onStartAll?

[Nes-si]

It's not a solution. If the scroll position is near the end, the bug still exists with offset = elementHeight – (endPos – scrollPos) . So when scrollPos == endPos, the offset is maximal, like on screencast. And when (endPos – scrollPos) ≥ elementHeight, the problem disappears.
I afraid it's a little bit complicated, sorry.

[yanhsu]

hello ,
i have same problem.
but i don't know how to resolve this problem.
do u have any suggestion to resolve this problem?
thanks.

[joshwcomeau]

Yeah, it's tricky. I haven't had the chance to dig into this yet.

I wonder if setting maintainContainerHeight={true} would fix it? That prop was added for a totally different reason, but it might help?

[yanhsu]

i had tried to add prop maintainContainerHeight={true} but still not resolve it.
i made a video to express this problem.
https://www.youtube.com/watch?v=uXkN2w3QNZ8&feature=youtu.be

[joshwcomeau]

Huh, that's even stranger.

This seems like an issue that should be prioritized, but I'm currently juggling too many side-projects. So I'm afraid I can't guarantee it'll get fixed anytime soon =(.