Dimension bindings intermittently add inline style="position:relative;" in Firefox

[niclasmattsson]

Using dimension bindings on an element will sometimes add an inline style position:relative; in Firefox. This overrides any other CSS positioning that may be defined on the element. The problem doesn't happen in Chrome.

The code below (borrowed from w3schools.com) reproduces the problem on my system roughly 50% of the time (although you may have to reload 10-20 times to see it, maybe due to page caching). I'm using Svelte 3.22.1 with Rollup, Firefox 75, Windows 10.

The inner div should be positioned to the right side of the outer div. When Svelte sometimes gives it position:relative; it is positioned to the left.

<script>
    import { onMount } from 'svelte';

    let clientWidth, clientHeight;
</script>

<style>
    .relative {
        position: relative;
        width: 400px;
        height: 200px;
        border: 3px solid #73AD21;
    } 

    .absolute {
        position: absolute;
        top: 80px;
        right: 0;
        width: 225px;
        height: 100px;
        border: 3px solid #73AD21;
    }
</style>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div has position: relative;
    <div class="absolute" bind:clientWidth bind:clientHeight>This div has position: absolute; and right: 0;</div>
</div>

EDIT: I can't reproduce this problem in Svelte's REPL. This is another sign (along with the intermittency) that makes me think the bug is lifecycle related. If so then maybe the page loading delays caused by the REPL infrastructure avoid the problem.

[Conduitry]

I'm not clear on the inner workings of the resize listener, but setting position: relative on it when its computed style is position: static is part of the mechanism implemented in #984/#1386. I don't know whether there's something that could be done about that.

[tivac]

It's so the injected <iframe> that is used to monitor for the element's size changing can use absolute positioning to be the exact same size as the element being measured.

[Conduitry]

Labeling this as docs because we should probably simply be documenting the expected gotchas here with the technique Svelte uses for this.

[niclasmattsson]

Fine. Label it however you see fit, but please note that:

• This only happens in Firefox, not in Chrome.
• The behavior is intermittent and the problem only appears half of the time.

This makes me suspect a bug rather than an expected gotcha, but you guys are the experts.

[JakubBlaha]

This also happens in the latest Edge version built on Chromium. The position: relative seems to happen every time, but the value that comes from the bound properties doesn't seem to update every time properly. If I then remove the position: relative using the Edge developer tools, the values of the bound properties update correctly.

[JakubBlaha]

Okay so...
it seems like the clientHeight does update correctly when my mouse cursor is outside of the viewport and doesn't update when my mouse cursor is inside the viewport during the site load.

What I have done as a workaround is that I have bound both, the clientHeight and the element's this.

<div
    class="w-full h-full overflow-scroll"
    bind:clientHeight={containerClientHeight}
    bind:this={container}
>

And then I have used onMount and tick to update the containerClientHeight variable to the correct value.

onMount(async () => {
    await tick();
    containerClientHeight = container.clientHeight;
})

Now the containerClientHeight variable seems to update correctly every time..

[gorsat]

I have been chasing down an intermittent problem on Safari where a sticky header was rendering incorrectly.

I found that the problem was caused by "element.style {position: relative;}" on the element that was supposed to be sticky. I could not see anything in our code that could be causing this. Finally, I looked at bundle.js and found it coming from svelte's generated code. A quick search then brought me to this issue thread. And, yes, the element in question is using the dimension binding feature (for offsetHeight).

To fix the problem I added an onMount handler for the parent component that just does element.style.position="" to clear out whatever svelte might have put there. Now the element properly behaves using the position: sticky property set in css.

This seems to me to be a real bug. Imo, svelte should never be setting the position property of one of my elements under the covers. But if it's going to do that then it should at least do it in a predictable, consistent and well documented way.