fix: synchronise element bindings (#10512)

fixes #10511
We used the animation frame dance previously where the `$effect` timing was slightly different and did not wait on its children before rerunning. With that changed now everything false into place nicely.

---------

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Simon Holthausen <[email protected]>

Author: Rich-Harris

.changeset/quiet-berries-end.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: tweak initial `bind:clientWidth/clientHeight/offsetWidth/offsetHeight` update timing

packages/svelte/src/internal/client/render.js

@@ -970,11 +970,11 @@ export function bind_resize_observer(dom, type, update) {
  * @param {(size: number) => void} update
  */
 export function bind_element_size(dom, type, update) {
-	// We need to wait a few ticks to be sure that the element has been inserted and rendered
-	// The alternative would be a mutation observer on the document but that's way to expensive
-	requestAnimationFrame(() => requestAnimationFrame(() => update(dom[type])));
 	const unsub = resize_observer_border_box.observe(dom, () => update(dom[type]));
-	render_effect(() => unsub);
+	effect(() => {
+		untrack(() => update(dom[type]));
+		return unsub;
+	});
 }
 
 /**

packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../assert';
+import { log } from './log.js';
+
+export default test({
+	async test({ assert }) {
+		await new Promise((fulfil) => setTimeout(fulfil, 0));
+
+		assert.deepEqual(log, [
+			[false, 0, 0],
+			[true, 100, 100]
+		]);
+	}
+});

packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js

@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];

packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { log } from './log.js';
+
+	let w = 0;
+	let h = 0;
+
+  /** @type {HTMLElement} */
+	let div;
+
+	$: {
+		log.push([!!div, w, h]);
+	}
+</script>
+
+<div bind:this={div} bind:clientWidth={w} bind:clientHeight={h} class="box"></div>
+
+<style>
+	.box {
+		width: 100px;
+		height: 100px;
+		background: #ff3e00;
+	}
+</style>