Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tenkir opened this issue Mar 22, 2024 · 3 comments
Labels
question Further information is requested

Comments

@Tenkir
Copy link

Tenkir commented Mar 22, 2024

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
@Tenkir
Copy link
Author

Tenkir commented Mar 22, 2024

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
Copy link
Contributor

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:

  • 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.

@marcofugaro marcofugaro added the question Further information is requested label Jun 20, 2024
@Tenkir
Copy link
Author

Tenkir commented Jun 21, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants