`fromTo` animation bug with height: auto affecting `scrollHeight`

[De.Minov]

 

 

I have an element .desc with the initial styles height: 0; opacity: 0. The task for GSAP is to animate it using fromTo, transitioning from the initial state to height: auto; opacity: 1. This creates a smooth expansion of the element's size, which in turn pushes the element below it (visually below it, but in the code, it's on a higher level).

This animation is triggered on hover over the parent .card.

 

The animation works perfectly, but there’s a bug:
If I scroll down so that the .desc element is hidden behind the viewport and then hover over the first .card, it seems like the .card itself is expanding, causing the scrollHeight of the page to increase. However, the .card has a fixed height and logically should not grow in size.

 

I’m attaching a minimal code example to reproduce the issue as well as a video showing the bug.
I’m using Chrome on Windows 11 (in case it helps).

See the Pen QWeowWO?editors=0110 by de-minov (@de-minov) on CodePen.

[Rodrigo]

Hi,

 

I've been fiddling with your demo for a bit and can't really get what could be the issue. Is quite weird, at least for me perhaps another user can know what's going on here. What makes this even more strange is that it happens only with the first element and only after certain scroll position, before that there is no problem as shown in this video:

https://i.imgur.com/BTkV9NJ.mp4

 

Your styles are consistent throughout all three elements with the exception that the 2nd and 3rd have margin top, but even if you give the first element a margin top it keeps happening. Also if you remove elements it always happens with the first, regardless of how many elements you have, so if you have just one it will happen, if you have 10 it will happen with the first 🤷‍♂️.

 

I've never seen anything like this and honestly I can't think why this is happening or a way to solve it. I'll try some ideas later when I have more time and see if something helps. Maybe try to not use flex on the elements and see what happens, at this point this is mostly trial and error I'm afraid.

[De.Minov]

It seems to have something to do with rendering in the browser, but what exactly is not clear. There is no time to bother with fixing this problem, I redid the animation a little differently - 

See the Pen zYgbPNP?editors=0110 by de-minov (@de-minov) on CodePen.

.

But it would be interesting if someone could solve this problem