Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Migrating a component with binded clientWidth and clientHeight from Svelte 4 to Svelte 5

$
0
0

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.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>