search

splinetool / react-spline

React component for Spline scenes.
MIT License
1.17k stars 58 forks source link

Nesting within a Flexbox sometimes causes infinite growth of the spline canvas #176

Open Tenkir opened 6 months ago

Tenkir commented 6 months ago

Reproduction

https://codesandbox.io/p/sandbox/spline-reproduction-72kjhn?file=%2Fsrc%2FApp.tsx%3A16%2C1

Description

When placing the Spline component inside a div that's contained within a Flexbox, when a specific combination of styles are includes, causes the Spline canvas to expand it's height infinitely.

Video

https://github.com/splinetool/react-spline/assets/3649828/4ea61fcb-97eb-4728-8ade-db809bac7cd0

Tenkir commented 6 months ago

Upon some more investigation, this seems to be an issue with the underlying @splinetool/runtime package, as I'm able to reproduce this with just using @splinetool/runtime.

If there's a better place to log this bug, since it has to do with the underlying runtime, not the @splinetool/react-spline package, please let me know.

https://codesandbox.io/p/sandbox/spline-reproduction-forked-fgxlns?file=%2Fsrc%2FApp.tsx%3A8%2C16

superguigui commented 3 months ago

Hi, sorry for the late reply and thanks a lot for your reproduction. It's indeed related to the runtime itself rather than to this react repo but the issue here is helpful since the runtime is not open source.

This specific layout is problematic with how we handle responsiveness in the runtime because we tell the canvas to fill its parent when responsive.

And in this layout the height: 100% with the 5px sibling and unstyled parent is contradictory and the canvas will always try to catch up parent while making it grow.

Even the browser is confused about this layout image

There are multiple ways to fix this layout:

Also maybe we can add parameters in the runtime to disable the autosize from parent code and let user manually resize instead, this could help in such cases.

Tenkir commented 3 months ago

Also maybe we can add parameters in the runtime to disable the autosize from parent code and let user manually resize instead, this could help in such cases.

That would be helpful for our use case, since the wrapping divs and styles are built into to our layout editor, and changing it would be a fairly substantial undertaking.