MasonryInfiniteGrid columnSize on Svelte does not work on initial load, only on resize

I have not confirmed this behavior on any other frameworks, onlysvelte.

Description

On svelte, the MasonryInfiniteGrid does not seem to load properly upon initial render. But when resizing the window, the columns fall into place correctly.

This is using columnSize as described here: https://naver.github.io/egjs-infinitegrid/docs/api/MasonryInfiniteGridOptions (Also unrelated, the docs seem to have duplicates, isEqualSize for example is listed twice, along with others.)

Steps to check or reproduce

1. Use the official demo code: https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/examples-masonryinfinitegrid--masonry-infinite-grid-template
2. Click the Svelte tab, click Open Sandbox
3. Note: The demo has a bug, fix App.svelte. Change for (let i = i to for (let i = 0
4. Add columnSize={300} to the component

Notice it does not render properly on initial load:

1. Resize the window, notice it corrects the render:

[franzvezuli]

@daybrush Thanks. Adding a width to the demo code does fix that issue.

Setting a width on the top level element in my test app did not solve it however. I think it may have something to do with SSR? I’m assuming that the demos are using Svelte native, without SSR.

I noticed that during browser resize, the library ads this in-line styles:

style="position: absolute; top: 0px; left: 917px; width: 300px;"

Or something similar.

Are there any solutions for when using Sveltkit SSR?

[franzvezuli]

@daybrush Thank you very much 😃

I have tried it, and my issue is resolved! Thank you for all your hard work!