You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
2024-03-22.10-42-57.mp4
The text was updated successfully, but these errors were encountered:
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.
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
There are multiple ways to fix this layout:
remove the height 100% on parent container of canvas or remove the 5px div colliding with the 100% of its sibling
remove the unstyled div inside the flex wrapper
don't use flex on parent wrapper
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.
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.
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
2024-03-22.10-42-57.mp4
The text was updated successfully, but these errors were encountered: