diff --git a/.changeset/quiet-berries-end.md b/.changeset/quiet-berries-end.md new file mode 100644 index 0000000000..155b7915f8 --- /dev/null +++ b/.changeset/quiet-berries-end.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: tweak initial `bind:clientWidth/clientHeight/offsetWidth/offsetHeight` update timing diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index b3a048183b..97cb748bae 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/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; + }); } /** diff --git a/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/_config.js b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/_config.js new file mode 100644 index 0000000000..5df9ca4ba2 --- /dev/null +++ b/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] + ]); + } +}); diff --git a/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js new file mode 100644 index 0000000000..d3df521f4d --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js @@ -0,0 +1,2 @@ +/** @type {any[]} */ +export const log = []; diff --git a/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte new file mode 100644 index 0000000000..7437bbc229 --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte @@ -0,0 +1,23 @@ + + +
+ +