bind:clientHeight not updating as expected

[nodra-vr]

Describe the bug

On load the value is often set to zero while the element does have a height, the behavior seems to be random. The REPL below almost always shows 0 for me, outside of the REPL in a project setup it is more hit and miss.

Seems to be related to:
#7099

The issue is confirmed by two others on discord:
https://discord.com/channels/457912077277855764/939868205869072444/946476600365568001

Reproduction

https://svelte.dev/repl/7b16f85496e24bca88c198753f005a61?version=3.46.4

Logs

No response

System Info

System:
    OS: Linux 5.13 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 1700X Eight-Core Processor
    Memory: 3.11 GB / 15.56 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 17.3.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.3.1 - /usr/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Chromium: 97.0.4692.99
  npmPackages:
    svelte: ^3.44.0 => 3.46.3 
    svelte repl: 3.46.4

Severity

annoyance

[kbrgl]

Experiencing the same issue, any fixes so far?

[nodra-vr]

I added a messy fix to the repl, it fakes an empty element with the same height/content. It works for some use cases but not all. No other fixes to this as far as I know.

{#if loaded}
    <h1>Hello {name}!</h1>	
{:else}
    <h1>&nbsp;</h1>
{/if}

[brycedorn]

Adding <style>div { height: 100vh }</style> to the repl example seems to solve the issue. But I agree this should match bind:clientWidth behavior since that doesn't require a width: 100% rule.

[nodra-vr]

As a ref. this was the workaround and info provided on discord by rmunn (not an easy setup, but it is a solid fix if you do not require IE support)

One workaround would be to use ResizeObserver if you don't need to keep IE support. #7099 (comment) mentions wanting to drop the current iframe-based implementation of bind:clientHeight in favor of a ResizeObserver method, due to the several bugs that appear to be linked to it. The only reason not to use ResizeObserver is that IE doesn't implement it (and never will, since IE is dead and nobody's working on it anymore). Svelte, AFAIK, still wants to support IE because there are still some sites that have to support it (due to having customers in large organizations, sometimes governments, that still mandate things like IE 8 (!) on their computers because at some point in the past it passed some sort of security audit). So as long as Svelte still supports IE, it's not possible for Svelte to use ResizeObserver. But you could implement it yourself if you don't need IE support.

ResizeObserver - Web APIs | MDN

[Rich-Harris]

Svelte 5 uses resize observers, which work more reliably — closing