Warning about complications with Block-level element bindings and position: relative

[lukaszpolowczyk]

Warning about complications with Block-level element bindings and position: relative

I think the svelte compiler should warn about Block-level bindings.

Problem:

There are situations where bind:clientWidth/clientHeight/offsetWidth/offsetHeight does not cause any problem.

But there are situations like:

Using or not using binding causes the items to DISPLAY differently. This is a problem.
https://svelte.dev/repl/7bf5621911fe4719b22ec8c7161f4622?version=3

with <code>bind:clientWidth</code>:
<div class="a">
  <div class="b" bind:clientWidth>
    <div class="c"></div>
  </div>
</div>
<br>
vs without <code>bind:clientWidth</code>:
<div class="a">
  <div class="b">
    <div class="c"></div>
  </div>
</div>

<script>
  let clientWidth;
</script>

<style>
  .a {
    position: relative;
    size: 40px;
    width: 70px;
    height: 70px;
    border: 1px solid green;
  }
  .b {
    margin: 30px;
  }
  .c {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 30px;
    background: red;
  }
</style>

Solution:

Perhaps the Svelte compiler needs to detect situations and display WARNING, where Block-level bindings are used in an intermediate element (class b), between a positioned element (class c) and an element with any relative position (class a).
The warning can be further narrowed down to the situation that the bound item (class b) has something like margin / padding / border etc. that distorts the position - because only then is it a problem.

Unfortunately, you probably have to think about what other dependencies are disturbed by Block-level bindings and detect them.

Additional/only simple solution:

There is only a link in the documentation about "technique used". but there is nothing about the potential side effects. There should be information about side effects in certain situations.

Bonus words:

I don't know if there are other solutions in Svelte that cause unexpected problems, but you would also need to inform the developers about them.

Related Stuff:

svelte/src/runtime/internal/dom.ts

Line 266 in 6d16e92

node.style.position = 'relative';

svelte/test/js/samples/bind-width-height/expected.js

Line 26 in 6d16e92

div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lukaszpolowczyk]

I find it interesting that no one is responding to this.
This is a bug.

[bluwy]

It's likely because there are similar existing ones already: #4776 and #5792. A warning would be fairly complex to implement and wouldn't catch all the cases, so I'd prefer an updated in the docs instead. A documentation PR is welcome!

Though if you want to escape Svelte's custom technique, you could use https://github.com/bluwy/svelte-fast-dimension too (make sure to check browser support).

[dummdidumm]

Fixed in Svelte 5