I'm migrating and app from Svelte 4 to Svelte 5 in order to prepare for future Svelte 5 release.
One of the component class has a logic to place itself on a random position on the user's screen, using bindings on clientWidth
and clientHeight
:
<script>import { onMount } from "svelte"import { tick } from "svelte"import { getRandomInt } from "$lib/js/utils.js"let leftlet toplet clientWidthlet clientHeightonMount(async () => { await tick() // Wait for component to be loaded left = getRandomInt(5, window.innerWidth - clientWidth - 5) top = getRandomInt(5, window.innerHeight - clientHeight - 5)})</script><div class="window" style="top: {top}px; left: {left}px;" bind:clientWidth bind:clientHeight> My content</div>
It works fine in Svelte 4, components were randomly placed over the window.
However, after migrating to Svelte 5 (5.0.0-next.242
) and changed some part of the code to be compatible, this part seems to be not working anymore, as all components are stacked at position 0,0 all together. No error is displayed in the console. What am I missing here?
EDIT: Forgot to mention that there is an external stylesheet in which window
class has absolute position. Didn't change that in between Svelte 4 and Svelte 5.