bind:offsetHeight doesn't update in certain cases

[plmrry]

Describe the bug
In Chrome, using bind:offsetHeight on a component that immediately changes size does not trigger a change in the offsetHeight variable:

https://codesandbox.io/s/upbeat-hill-ilkqt?fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark

This does not seem to happen in Firefox or Safari, but it does happen in Chrome.

To Reproduce
https://codesandbox.io/s/upbeat-hill-ilkqt?fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark

Expected behavior
offsetHeight should be something close to 800 (in the example above)

Notes
Is there a reason Svelte doesn't attempt to use a ResizeObserver for resize detection?

[Conduitry]

When this was first implemented in #1386, ResizeObserver had just come out from behind a flag in Chrome and wasn't available anywhere else yet. It'd probably make sense to use that now though when possible.

[arxpoetica]

@Conduitry would you be worried about the lack of Safari support here: https://caniuse.com/#search=ResizeObserver (esp. iOS)

[Conduitry]

I wasn't suggesting that we drop the existing resizing mechanism, just that ResizeObserver is widespread enough that it'd be worth it to use that when possible.

[Prinzhorn]

When ResizeObserver gets implemented in one way or another I'd love to see a compiler option with three possible options:

1. Default: use ResizeObserver where possible, fall back to the current solution in other browsers
2. Only use ResizeObserver
3. Only use the current behavior

This would allow predictable results for people that need them. For example in an Electron application we know that ResizeObserver is supported and we don't need to ship the fallback at all. On the other hand, for people that run into issues with the new ResizeObserver implementation they can enable the legacy behavior in every browser.

[jacwright]

ResizeObserver is looking pretty good now. https://caniuse.com/#search=ResizeObserver

Probably still want to keep the fallback for older browsers, but it would be worth adding it now as most browsers support it.

This would be an easy ticket for anyone interested in contributing to core. Just one runtime method to update, add_resize_listener:

https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts#L262

[iamricard]

I'd like to take this, if nobody's working on it!

[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.