bind:offsetWidth and acync css loading bug

[NikolayMakhonin]

Describe the bug

Hello. I am having a problem with this code:

<div
  class="container"
  bind:offsetWidth={containerWidth}
  bind:offsetHeight={containerHeight}
></div>

<style>
  .container {
    position: absolute;
  }
</style>

I am loading the css of the component asynchronously:

<link rel="preload" href="/build/component.css" as="style">
<link rel="stylesheet" href="/build/component.css">

And so the svelte code below is executed before the css is loaded and sets the unnecessary style position: relative and rewrite my style position: absolute:

function add_resize_listener(node, fn) {
    const computed_style = getComputedStyle(node);
    if (computed_style.position === 'static') {
        node.style.position = 'relative';
    }

svelte/src/runtime/internal/dom.ts

Line 589 in fc4797c

node.style.position = 'relative';

Is it possible to fix it or should I not use asynchronous loading of css, or use position:absolute!important?

Reproduction

I'm not sure if this should be reproduced. It seems that everything is obvious from the description.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-3610QM CPU @ 2.30GHz
    Memory: 1.91 GB / 15.89 GB
  Binaries:
    Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Users\User\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (96.0.1054.62)
    Internet Explorer: 11.0.19041.906
  npmPackages:
    rollup: ^2.41.2 => 2.60.1
    svelte: ^3.44.3 => 3.44.3

Severity

annoyance

[Prinzhorn]

This appears to be another limitation of the iframe workaround (hopefully to be replaced with ResizeObserver at some point):

#4233
#6127
#6708
#5524

Is it possible to fix it or should I not use asynchronous loading of css, or use position:absolute!important?

I guess that's up to you how you want to workaround it. Depending on what type of application your are working on synchronous CSS might be beneficial. You could also add an inline style for this edge case and have a comment point to this issue. Or use ResizeObserver manually. All of these options are legit.

[Rich-Harris]

Svelte 5 uses resize observers rather than the iframe hack, so I'll close this