clientWidth, clientHeight doesnt update when adding a child to the parent.

[Tichss]

Describe the bug

clientWidth and clientHeight doesnt update when the parent has overflow: auto (with no resizing, fixed dimensions) and a child is added. However, the scrollbar may still appear, and the client dimensions should decrease

Reproduction

https://svelte.dev/playground/d66bf3f673864877881f6b68f81b3f82?version=5.25.3

1. Check the client's size — it's 300 × 300.
2. Add a child by clicking the 'toggle child' button.
3. Check the dimensions — still 300 × 300, but the scrollbars are there.
4. Press the 'refresh parent' button to remount the parent.
5. Check the dimensions — finally updated to 2xx × 2xx (depends on the browser and OS).

Logs

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 3.70 GB / 15.87 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE     
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355


Svelte: 5.25.3

Severity

annoyance

[adiguba]

Hello,

I think it's because the observer use {box: 'border-box'} here :

svelte/packages/svelte/src/internal/client/dom/elements/bindings/size.js

Line 101 in f498a21

var unsub = resize_observer_border_box.observe(element, () => set(element[type]));

But I don't know the implications this could have...