React-spring: Parallax is breaking the layout

[visualcookie]

Hey, I'm having troubles using react-spring without breaking my layout. On the background of my page are a couple of lines, which will be animated as well as each content element inside of a content section will move accordingly (moving slowly up or down).

While doing this, the issue is, that without applying a fixed height to my content sections, the layout will break. I've discovered by simply removing the position: absolute; and height: 0; from the elements, the parallax still works, so I don't know why these props are even there.

May there be a way of simply deciding whether to use position? Shouldn't the height be the height of the element inside?

[aleclarson]

Please provide a minimal CodeSandbox of what you've tried. Thanks! 👍

[visualcookie]

@aleclarson Hey, sure. Just set-up the elements like I'm having them + adding a spacer, so you can scroll.

Can be best viewed on full view.

LINK https://codesandbox.io/s/2w55xwwj0

[aleclarson]

The sandbox seems to have been deleted. 😅

[lopezdp]

really wish that code pen was still around

[tiarebalbi]

The Sandbox is working as expected...

https://codesandbox.io/s/2w55xwwj0

I'm having the same issue on Tablets... for desktop the size is perfect but as soon I change the resolution for an iPad I start to have an overlap of the sections...

Link: https://new-site.tiarebalbi.com/